mirror of https://gitee.com/bigwinds/arangodb
This commit is contained in:
hkernbach
parent
27fffd4c4e
commit
413d813e38
|
|
@ -1,13 +0,0 @@
|
|||
.popper-container {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
.popper-container .primary-popper {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.popper-container .secondary-popper {
|
||||
position: absolute;
|
||||
display: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
!function(t){function i(i,a){this.element=t(i),this.primary=this.element.find("[data-primary]"),this.poppers=this.element.find(":not([data-primary])"),this.options=t.extend({},y,a||{}),this.primary.on("click",this.primaryClicked.bind(this)),this.element.addClass(n),this.poppers.addClass(o),this.primary.addClass(s),this.hidePoppers(!1)}var n="popper-container",o="secondary-popper",s="primary-popper",a="popped",e="radial",r="right",p="left",h="up",d="down",u=[h,d],l=[p,r],c={left:"left",right:"right",up:"top",down:"bottom"},y={transitionOutDuration:450,transitionInDuration:450,transitionOutDelay:50,transitionInDelay:50,transitionOutEasing:"easeOutBack",transitionInEasing:"easeInBack",animation:null,direction:e,radius:100},g={spiral:{transitionOutDuration:450,transitionInDuration:450,transitionOutDelay:50,transitionInDelay:50,transitionOutEasing:"easeOutBack",transitionInEasing:"easeInBack",direction:e},pop:{transitionOutDuration:450,transitionInDuration:450,transitionOutDelay:0,transitionInDelay:0,transitionOutEasing:"easeOutBack",transitionInEasing:"easeInBack",direction:e}};i.prototype.getPoppersStartingPosition=function(){return{x:Math.abs(this.primary.position().left+this.primary.width()/2),y:Math.abs(this.primary.position().top+this.primary.height()/2)}},i.prototype.getTransitionRules=function(){return this.options.animation&&this.options.animation in g?g[this.options.animation]:this.options},i.prototype.hidePoppers=function(i){var n=this.getPoppersStartingPosition(),o=this.getTransitionRules(),s={},e=u.indexOf(this.options.direction)>-1?this.options.direction:h;horizontalDirection=l.indexOf(this.options.direction)>-1?this.options.direction:p,i===!1?this.poppers.each(function(){s[c[horizontalDirection]]=n.x-t(this).width()/2,s[c[e]]=n.y-t(this).height()/2,t(this).css(s)}):this.poppers.each(function(i,a){s[c[horizontalDirection]]=n.x-t(a).width()/2,s[c[e]]=n.y-t(a).height()/2,t(a).stop().delay(i*o.transitionInDelay).animate(s,{duration:o.transitionInDuration,easing:o.transitionInEasing})}.bind(this)),this.element.removeClass(a)},i.prototype.showPoppers=function(){var t,i=(2*Math.PI/this.poppers.length,this.getTransitionRules()),n=this.element.width(),o=this.element.height();this.element.addClass(a),this.poppers.show(),this.options.direction===e?t=this.radialTransition.bind(this,i,n,o):(u.indexOf(this.options.direction)>-1||l.indexOf(this.options.direction)>-1)&&(t=this.straightTransition.bind(this,i,this.options.direction,n,o)),this.poppers.each(t)},i.prototype.radialTransition=function(i,n,o,s,a){var e=t(a).width(),r=t(a).height(),p=n/2-t(a).width()/2,h=o/2-t(a).height()/2,d=s*(2*Math.PI/this.poppers.length),u=Math.round(e+this.options.radius*Math.cos(d)-p/2),l=Math.round(r+this.options.radius*Math.sin(d)-h/2);t(a).delay(s*i.transitionOutDelay).animate({left:u+"px",top:l+"px"},{duration:i.transitionOutDuration,easing:i.transitionOutEasing})},i.prototype.straightTransition=function(i,n,o,s,a,e){var r=t(e).width(),p=t(e).height(),h=(this.getPoppersStartingPosition(),{});l.indexOf(n)>-1?h[c[n]]=a*(r+r/2)+o+r/2:h[c[n]]=a*(p+p/2)+s+p/2,t(e).delay(a*i.transitionOutDelay).animate(h,{duration:i.transitionOutDuration,easing:i.transitionOutEasing})},i.prototype.primaryClicked=function(){return this.element.hasClass("popped")?this.hidePoppers():this.showPoppers(),!1},t.fn.popper=function(n){return this.each(function(){var o=new i(this,n);t(this).data("popper",o)})}}(jQuery);
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,845 @@
|
|||
///#source 1 1 /js/source/slicePath/wheelnav.slicePathStart.js
|
||||
/* ======================================================================================= */
|
||||
/* Slice path definitions. */
|
||||
/* ======================================================================================= */
|
||||
/* ======================================================================================= */
|
||||
/* Documentation: http://wheelnavjs.softwaretailoring.net/documentation/slicePath.html */
|
||||
/* ======================================================================================= */
|
||||
|
||||
slicePath = function () {
|
||||
|
||||
this.NullSlice = function (helper, percent, custom) {
|
||||
|
||||
helper.setBaseValue(percent, custom);
|
||||
|
||||
return {
|
||||
slicePathString: "",
|
||||
linePathString: "",
|
||||
titlePosX: helper.titlePosX,
|
||||
titlePosY: helper.titlePosY
|
||||
};
|
||||
};
|
||||
|
||||
this.NullInitSlice = function (helper, percent, custom) {
|
||||
|
||||
helper.setBaseValue(percent, custom);
|
||||
|
||||
slicePathString = [helper.MoveToCenter(),
|
||||
helper.Close()];
|
||||
|
||||
return {
|
||||
slicePathString: slicePathString,
|
||||
linePathString: slicePathString,
|
||||
titlePosX: helper.centerX,
|
||||
titlePosY: helper.centerY
|
||||
};
|
||||
};
|
||||
|
||||
///#source 1 1 /js/source/slicePath/wheelnav.slicePath.Pie.js
|
||||
|
||||
this.PieSliceCustomization = function () {
|
||||
|
||||
var custom = new slicePathCustomization();
|
||||
custom.titleRadiusPercent = 0.6;
|
||||
custom.arcBaseRadiusPercent = 1;
|
||||
custom.arcRadiusPercent = 1;
|
||||
custom.startRadiusPercent = 0;
|
||||
return custom;
|
||||
};
|
||||
|
||||
this.PieSlice = function (helper, percent, custom) {
|
||||
|
||||
if (custom === null) {
|
||||
custom = PieSliceCustomization();
|
||||
}
|
||||
|
||||
helper.setBaseValue(percent, custom);
|
||||
|
||||
var arcBaseRadius = helper.sliceRadius * custom.arcBaseRadiusPercent;
|
||||
var arcRadius = helper.sliceRadius * custom.arcRadiusPercent;
|
||||
|
||||
slicePathString = [helper.MoveTo(helper.middleAngle, custom.startRadiusPercent * helper.sliceRadius),
|
||||
helper.LineTo(helper.startAngle, arcBaseRadius),
|
||||
helper.ArcTo(arcRadius, helper.endAngle, arcBaseRadius),
|
||||
helper.Close()];
|
||||
|
||||
return {
|
||||
slicePathString: slicePathString,
|
||||
linePathString: "",
|
||||
titlePosX: helper.titlePosX,
|
||||
titlePosY: helper.titlePosY
|
||||
};
|
||||
};
|
||||
|
||||
this.FlowerSlice = function (helper, percent, custom) {
|
||||
|
||||
if (custom === null) {
|
||||
custom = PieSliceCustomization();
|
||||
custom.titleRadiusPercent = 0.5;
|
||||
custom.arcBaseRadiusPercent = 0.65;
|
||||
custom.arcRadiusPercent = 0.14;
|
||||
}
|
||||
|
||||
var slicePath = PieSlice(helper, percent, custom);
|
||||
|
||||
return {
|
||||
slicePathString: slicePath.slicePathString,
|
||||
linePathString: "",
|
||||
titlePosX: slicePath.titlePosX,
|
||||
titlePosY: slicePath.titlePosY
|
||||
};
|
||||
};
|
||||
|
||||
///#source 1 1 /js/source/slicePath/wheelnav.slicePath.PieArrow.js
|
||||
|
||||
this.PieArrowSliceCustomization = function () {
|
||||
|
||||
var custom = new slicePathCustomization();
|
||||
custom.titleRadiusPercent = 0.6;
|
||||
custom.arrowRadiusPercent = 1.1;
|
||||
|
||||
return custom;
|
||||
};
|
||||
|
||||
this.PieArrowSlice = function (helper, percent, custom) {
|
||||
|
||||
if (custom === null) {
|
||||
custom = PieArrowSliceCustomization();
|
||||
}
|
||||
|
||||
helper.setBaseValue(percent, custom);
|
||||
|
||||
r = helper.sliceRadius;
|
||||
|
||||
arrowAngleStart = helper.startAngle + helper.sliceAngle * 0.45;
|
||||
arrowAngleEnd = helper.startAngle + helper.sliceAngle * 0.55;
|
||||
|
||||
var arrowRadius = r * custom.arrowRadiusPercent;
|
||||
|
||||
slicePathString = [helper.MoveToCenter(),
|
||||
helper.LineTo(helper.startAngle, r),
|
||||
helper.ArcTo(r, arrowAngleStart, r),
|
||||
helper.LineTo(helper.middleAngle, arrowRadius),
|
||||
helper.LineTo(arrowAngleEnd, r),
|
||||
helper.ArcTo(r, helper.endAngle, r),
|
||||
helper.Close()];
|
||||
|
||||
return {
|
||||
slicePathString: slicePathString,
|
||||
linePathString: "",
|
||||
titlePosX: helper.titlePosX,
|
||||
titlePosY: helper.titlePosY
|
||||
};
|
||||
};
|
||||
|
||||
this.PieArrowBasePieSlice = function (helper, percent, custom) {
|
||||
|
||||
if (custom === null) {
|
||||
custom = PieArrowSliceCustomization();
|
||||
}
|
||||
|
||||
custom.arrowRadiusPercent = 1;
|
||||
var slicePath = PieArrowSlice(helper, percent, custom);
|
||||
|
||||
return {
|
||||
slicePathString: slicePath.slicePathString,
|
||||
linePathString: "",
|
||||
titlePosX: slicePath.titlePosX,
|
||||
titlePosY: slicePath.titlePosY
|
||||
};
|
||||
};
|
||||
|
||||
///#source 1 1 /js/source/slicePath/wheelnav.slicePath.Donut.js
|
||||
|
||||
this.DonutSliceCustomization = function () {
|
||||
|
||||
var custom = new slicePathCustomization();
|
||||
custom.minRadiusPercent = 0.37;
|
||||
custom.maxRadiusPercent = 0.9;
|
||||
|
||||
return custom;
|
||||
};
|
||||
|
||||
this.DonutSlice = function (helper, percent, custom) {
|
||||
|
||||
if (custom === null) {
|
||||
custom = DonutSliceCustomization();
|
||||
}
|
||||
|
||||
maxRadius = helper.wheelRadius * percent * custom.maxRadiusPercent;
|
||||
minRadius = helper.wheelRadius * percent * custom.minRadiusPercent;
|
||||
|
||||
helper.setBaseValue(percent, custom);
|
||||
|
||||
helper.titleRadius = (maxRadius + minRadius) / 2;
|
||||
helper.setTitlePos();
|
||||
|
||||
slicePathString = [helper.MoveTo(helper.startAngle, minRadius),
|
||||
helper.LineTo(helper.startAngle, maxRadius),
|
||||
helper.ArcTo(maxRadius, helper.endAngle, maxRadius),
|
||||
helper.LineTo(helper.endAngle, minRadius),
|
||||
helper.ArcBackTo(minRadius, helper.startAngle, minRadius),
|
||||
helper.Close()];
|
||||
|
||||
return {
|
||||
slicePathString: slicePathString,
|
||||
linePathString: "",
|
||||
titlePosX: helper.titlePosX,
|
||||
titlePosY: helper.titlePosY
|
||||
};
|
||||
};
|
||||
|
||||
///#source 1 1 /js/source/slicePath/wheelnav.slicePath.Cog.js
|
||||
|
||||
this.CogSliceCustomization = function () {
|
||||
|
||||
var custom = new slicePathCustomization();
|
||||
custom.titleRadiusPercent = 0.55;
|
||||
custom.isBasePieSlice = false;
|
||||
|
||||
return custom;
|
||||
};
|
||||
|
||||
this.CogSlice = function (helper, percent, custom) {
|
||||
|
||||
if (custom === null) {
|
||||
custom = CogSliceCustomization();
|
||||
}
|
||||
|
||||
helper.setBaseValue(percent, custom);
|
||||
|
||||
r = helper.sliceRadius;
|
||||
rbase = helper.wheelRadius * percent * 0.83;
|
||||
|
||||
percentAngle0625 = helper.startAngle + helper.sliceAngle * 0.0625;
|
||||
percentAngle1250 = helper.startAngle + helper.sliceAngle * 0.125;
|
||||
percentAngle1875 = helper.startAngle + helper.sliceAngle * 0.1875;
|
||||
percentAngle2500 = helper.startAngle + helper.sliceAngle * 0.25;
|
||||
percentAngle3125 = helper.startAngle + helper.sliceAngle * 0.3125;
|
||||
percentAngle3750 = helper.startAngle + helper.sliceAngle * 0.375;
|
||||
percentAngle4375 = helper.startAngle + helper.sliceAngle * 0.4375;
|
||||
percentAngle5000 = helper.startAngle + helper.sliceAngle * 0.5;
|
||||
percentAngle5625 = helper.startAngle + helper.sliceAngle * 0.5625;
|
||||
percentAngle6250 = helper.startAngle + helper.sliceAngle * 0.625;
|
||||
percentAngle6875 = helper.startAngle + helper.sliceAngle * 0.6875;
|
||||
percentAngle7500 = helper.startAngle + helper.sliceAngle * 0.75;
|
||||
percentAngle8125 = helper.startAngle + helper.sliceAngle * 0.8125;
|
||||
percentAngle8750 = helper.startAngle + helper.sliceAngle * 0.875;
|
||||
percentAngle9375 = helper.startAngle + helper.sliceAngle * 0.9375;
|
||||
percentAngle9687 = helper.startAngle + helper.sliceAngle * 0.96875;
|
||||
|
||||
if (custom.isBasePieSlice) {
|
||||
r = rbase;
|
||||
slicePathString = [helper.MoveToCenter(),
|
||||
helper.LineTo(helper.startAngle, r),
|
||||
helper.ArcTo(r, percentAngle0625, r),
|
||||
helper.ArcTo(r, percentAngle1250, r),
|
||||
helper.ArcTo(r, percentAngle1875, r),
|
||||
helper.ArcTo(r, percentAngle2500, r),
|
||||
helper.ArcTo(r, percentAngle3125, r),
|
||||
helper.ArcTo(r, percentAngle3750, r),
|
||||
helper.ArcTo(r, percentAngle4375, r),
|
||||
helper.ArcTo(r, percentAngle5000, r),
|
||||
helper.ArcTo(r, percentAngle5625, r),
|
||||
helper.ArcTo(r, percentAngle6250, r),
|
||||
helper.ArcTo(r, percentAngle6875, r),
|
||||
helper.ArcTo(r, percentAngle7500, r),
|
||||
helper.ArcTo(r, percentAngle8125, r),
|
||||
helper.ArcTo(r, percentAngle8750, r),
|
||||
helper.ArcTo(r, percentAngle9375, r),
|
||||
helper.ArcTo(r, percentAngle9687, r),
|
||||
helper.ArcTo(r, helper.endAngle, r),
|
||||
helper.Close()];
|
||||
}
|
||||
else {
|
||||
slicePathString = [helper.MoveToCenter(),
|
||||
helper.LineTo(helper.startAngle, r),
|
||||
helper.ArcTo(r, percentAngle0625, r),
|
||||
helper.LineTo(percentAngle0625, rbase),
|
||||
helper.ArcTo(rbase, percentAngle1875, rbase),
|
||||
helper.LineTo(percentAngle1875, r),
|
||||
helper.ArcTo(r, percentAngle3125, r),
|
||||
helper.LineTo(percentAngle3125, rbase),
|
||||
helper.ArcTo(rbase, percentAngle4375, rbase),
|
||||
helper.LineTo(percentAngle4375, r),
|
||||
helper.ArcTo(r, percentAngle5625, r),
|
||||
helper.LineTo(percentAngle5625, rbase),
|
||||
helper.ArcTo(rbase, percentAngle6875, rbase),
|
||||
helper.LineTo(percentAngle6875, r),
|
||||
helper.ArcTo(r, percentAngle8125, r),
|
||||
helper.LineTo(percentAngle8125, rbase),
|
||||
helper.ArcTo(rbase, percentAngle9375, rbase),
|
||||
helper.LineTo(percentAngle9375, r),
|
||||
helper.ArcTo(r, helper.endAngle, r),
|
||||
helper.Close()];
|
||||
}
|
||||
|
||||
return {
|
||||
slicePathString: slicePathString,
|
||||
linePathString: "",
|
||||
titlePosX: helper.titlePosX,
|
||||
titlePosY: helper.titlePosY
|
||||
};
|
||||
};
|
||||
|
||||
this.CogBasePieSlice = function (helper, percent, custom) {
|
||||
|
||||
if (custom === null) {
|
||||
custom = CogSliceCustomization();
|
||||
}
|
||||
|
||||
custom.isBasePieSlice = true;
|
||||
|
||||
var slicePath = CogSlice(helper, percent, custom);
|
||||
|
||||
return {
|
||||
slicePathString: slicePath.slicePathString,
|
||||
linePathString: "",
|
||||
titlePosX: slicePath.titlePosX,
|
||||
titlePosY: slicePath.titlePosY
|
||||
};
|
||||
};
|
||||
|
||||
///#source 1 1 /js/source/slicePath/wheelnav.slicePath.Star.js
|
||||
|
||||
this.StarSliceCustomization = function () {
|
||||
|
||||
var custom = new slicePathCustomization();
|
||||
custom.titleRadiusPercent = 0.44;
|
||||
custom.minRadiusPercent = 0.5;
|
||||
custom.isBasePieSlice = false;
|
||||
|
||||
return custom;
|
||||
};
|
||||
|
||||
this.StarSlice = function (helper, percent, custom) {
|
||||
|
||||
if (custom === null) {
|
||||
custom = StarSliceCustomization();
|
||||
}
|
||||
|
||||
helper.setBaseValue(percent, custom);
|
||||
|
||||
r = helper.wheelRadius * percent;
|
||||
rbase = r * custom.minRadiusPercent;
|
||||
|
||||
if (custom.isBasePieSlice) {
|
||||
r = helper.sliceRadius;
|
||||
slicePathString = [helper.MoveToCenter(),
|
||||
helper.LineTo(helper.startAngle, r),
|
||||
helper.ArcTo(r, helper.middleAngle, r),
|
||||
helper.ArcTo(r, helper.endAngle, r),
|
||||
helper.Close()];
|
||||
}
|
||||
else {
|
||||
slicePathString = [helper.MoveToCenter(),
|
||||
helper.LineTo(helper.startAngle, rbase),
|
||||
helper.LineTo(helper.middleAngle, r),
|
||||
helper.LineTo(helper.endAngle, rbase),
|
||||
helper.Close()];
|
||||
}
|
||||
|
||||
return {
|
||||
slicePathString: slicePathString,
|
||||
linePathString: "",
|
||||
titlePosX: helper.titlePosX,
|
||||
titlePosY: helper.titlePosY
|
||||
};
|
||||
};
|
||||
|
||||
this.StarBasePieSlice = function (helper, percent, custom) {
|
||||
|
||||
if (custom === null) {
|
||||
custom = StarSliceCustomization();
|
||||
}
|
||||
|
||||
custom.titleRadiusPercent = 0.6;
|
||||
custom.isBasePieSlice = true;
|
||||
|
||||
var slicePath = StarSlice(helper, percent, custom);
|
||||
|
||||
return {
|
||||
slicePathString: slicePath.slicePathString,
|
||||
linePathString: "",
|
||||
titlePosX: slicePath.titlePosX,
|
||||
titlePosY: slicePath.titlePosY
|
||||
};
|
||||
};
|
||||
|
||||
///#source 1 1 /js/source/slicePath/wheelnav.slicePath.Menu.js
|
||||
|
||||
this.MenuSliceCustomization = function () {
|
||||
|
||||
var custom = new slicePathCustomization();
|
||||
custom.menuRadius = 35;
|
||||
custom.titleRadiusPercent = 0.63;
|
||||
custom.isSelectedLine = false;
|
||||
custom.lineBaseRadiusPercent = 0;
|
||||
|
||||
return custom;
|
||||
};
|
||||
|
||||
this.MenuSlice = function (helper, percent, custom) {
|
||||
|
||||
if (custom === null) {
|
||||
custom = MenuSliceCustomization();
|
||||
}
|
||||
|
||||
helper.setBaseValue(percent, custom);
|
||||
x = helper.centerX;
|
||||
y = helper.centerY;
|
||||
|
||||
var r = helper.wheelRadius * percent;
|
||||
helper.titleRadius = r * custom.titleRadiusPercent;
|
||||
helper.setTitlePos();
|
||||
|
||||
var menuRadius = percent * custom.menuRadius;
|
||||
|
||||
if (percent <= 0.05) { menuRadius = 10; }
|
||||
|
||||
middleTheta = helper.middleTheta;
|
||||
|
||||
slicePathString = [["M", helper.titlePosX - (menuRadius * Math.cos(middleTheta)), helper.titlePosY - (menuRadius * Math.sin(middleTheta))],
|
||||
["A", menuRadius, menuRadius, 0, 0, 1, helper.titlePosX + (menuRadius * Math.cos(middleTheta)), helper.titlePosY + (menuRadius * Math.sin(middleTheta))],
|
||||
["A", menuRadius, menuRadius, 0, 0, 1, helper.titlePosX - (menuRadius * Math.cos(middleTheta)), helper.titlePosY - (menuRadius * Math.sin(middleTheta))],
|
||||
["z"]];
|
||||
|
||||
if (percent <= 0.05) {
|
||||
linePathString = [["M", x, y],
|
||||
["A", 1, 1, 0, 0, 1, x + 1, y + 1]];
|
||||
}
|
||||
else {
|
||||
if (!custom.isSelectedLine) {
|
||||
linePathString = [helper.MoveTo(helper.middleAngle, custom.lineBaseRadiusPercent * r),
|
||||
helper.ArcTo(r / 2, helper.middleAngle, helper.titleRadius - menuRadius)];
|
||||
}
|
||||
else {
|
||||
linePathString = [helper.MoveTo(helper.middleAngle, custom.lineBaseRadiusPercent * r),
|
||||
helper.ArcTo(r / 3, helper.middleAngle, helper.titleRadius - menuRadius)];
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
slicePathString: slicePathString,
|
||||
linePathString: linePathString,
|
||||
titlePosX: helper.titlePosX,
|
||||
titlePosY: helper.titlePosY
|
||||
};
|
||||
};
|
||||
|
||||
this.MenuSliceSelectedLine = function (helper, percent, custom) {
|
||||
|
||||
if (custom === null) {
|
||||
custom = MenuSliceCustomization();
|
||||
}
|
||||
|
||||
custom.isSelectedLine = true;
|
||||
|
||||
var slicePath = MenuSlice(helper, percent, custom);
|
||||
|
||||
return {
|
||||
slicePathString: slicePath.slicePathString,
|
||||
linePathString: slicePath.linePathString,
|
||||
titlePosX: slicePath.titlePosX,
|
||||
titlePosY: slicePath.titlePosY
|
||||
};
|
||||
};
|
||||
|
||||
this.MenuSliceWithoutLine = function (helper, percent, custom) {
|
||||
|
||||
var slicePath = MenuSlice(helper, percent, custom);
|
||||
|
||||
return {
|
||||
slicePathString: slicePath.slicePathString,
|
||||
linePathString: "",
|
||||
titlePosX: slicePath.titlePosX,
|
||||
titlePosY: slicePath.titlePosY
|
||||
};
|
||||
};
|
||||
|
||||
///#source 1 1 /js/source/slicePath/wheelnav.slicePath.Line.js
|
||||
|
||||
this.LineSlice = function (helper, percent, custom) {
|
||||
|
||||
helper.setBaseValue(percent, custom);
|
||||
|
||||
r = helper.sliceRadius;
|
||||
|
||||
if (helper.sliceAngle > 60 &&
|
||||
helper.sliceAngle < 180) {
|
||||
helper.titleRadius = r * ((180 / helper.sliceAngle) / 5);
|
||||
helper.setTitlePos();
|
||||
}
|
||||
else {
|
||||
helper.titleRadius = r * 0.55;
|
||||
helper.setTitlePos();
|
||||
}
|
||||
|
||||
if (helper.sliceAngle < 180) {
|
||||
slicePathString = [helper.MoveToCenter(),
|
||||
helper.LineTo(helper.startAngle, r),
|
||||
helper.LineTo(helper.endAngle, r),
|
||||
helper.Close()];
|
||||
}
|
||||
else {
|
||||
if (helper.startAngle === 180 ||
|
||||
helper.startAngle === 0 ||
|
||||
helper.startAngle === -180 ||
|
||||
helper.startAngle === 360) {
|
||||
slicePathString = [helper.MoveToCenter(),
|
||||
helper.LineTo(helper.startAngle, r),
|
||||
helper.LineTo(helper.startAngle, r, helper.middleAngle, r),
|
||||
helper.LineTo(helper.endAngle, r, helper.middleAngle, r),
|
||||
helper.LineTo(helper.endAngle, r),
|
||||
helper.Close()];
|
||||
}
|
||||
else {
|
||||
slicePathString = [helper.MoveToCenter(),
|
||||
helper.LineTo(helper.startAngle, r),
|
||||
helper.LineTo(helper.middleAngle, r, helper.startAngle, r),
|
||||
helper.LineTo(helper.middleAngle, r, helper.endAngle, r),
|
||||
helper.LineTo(helper.endAngle, r),
|
||||
helper.Close()];
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
slicePathString: slicePathString,
|
||||
linePathString: "",
|
||||
titlePosX: helper.titlePosX,
|
||||
titlePosY: helper.titlePosY
|
||||
};
|
||||
};
|
||||
|
||||
///#source 1 1 /js/source/slicePath/wheelnav.slicePath.Eye.js
|
||||
|
||||
this.EyeSliceCustomization = function () {
|
||||
|
||||
var custom = new slicePathCustomization();
|
||||
custom.titleRadiusPercent = 0.68;
|
||||
|
||||
return custom;
|
||||
};
|
||||
|
||||
this.EyeSlice = function (helper, percent, custom) {
|
||||
|
||||
if (custom === null) {
|
||||
custom = EyeSliceCustomization();
|
||||
}
|
||||
|
||||
helper.setBaseValue(percent, custom);
|
||||
|
||||
r = helper.wheelRadius * percent * 0.7;
|
||||
|
||||
if (percent === 0) {
|
||||
r = 0.01;
|
||||
}
|
||||
|
||||
startAngle = helper.startAngle;
|
||||
endAngle = helper.endAngle;
|
||||
|
||||
if (helper.sliceAngle === 180) {
|
||||
startAngle = helper.startAngle + helper.sliceAngle / 4;
|
||||
endAngle = helper.startAngle + helper.sliceAngle - helper.sliceAngle / 4;
|
||||
}
|
||||
|
||||
slicePathString = [helper.MoveTo(endAngle, r),
|
||||
helper.ArcTo(r, startAngle, r),
|
||||
helper.ArcTo(r, endAngle, r),
|
||||
helper.Close()];
|
||||
|
||||
return {
|
||||
slicePathString: slicePathString,
|
||||
linePathString: "",
|
||||
titlePosX: helper.titlePosX,
|
||||
titlePosY: helper.titlePosY
|
||||
};
|
||||
};
|
||||
|
||||
///#source 1 1 /js/source/slicePath/wheelnav.slicePath.Wheel.js
|
||||
|
||||
this.WheelSlice = function (helper, percent, custom) {
|
||||
|
||||
helper.setBaseValue(percent, custom);
|
||||
x = helper.centerX;
|
||||
y = helper.centerY;
|
||||
|
||||
r = helper.sliceRadius;
|
||||
|
||||
startTheta = helper.startTheta;
|
||||
middleTheta = helper.middleTheta;
|
||||
endTheta = helper.endTheta;
|
||||
|
||||
var innerRadiusPercent;
|
||||
|
||||
if (helper.sliceAngle < 120) {
|
||||
helper.titleRadius = r * 0.57;
|
||||
innerRadiusPercent = 0.9;
|
||||
}
|
||||
else if (helper.sliceAngle < 180) {
|
||||
helper.titleRadius = r * 0.52;
|
||||
innerRadiusPercent = 0.91;
|
||||
}
|
||||
else {
|
||||
helper.titleRadius = r * 0.45;
|
||||
innerRadiusPercent = 0.873;
|
||||
}
|
||||
|
||||
slicePathString = [helper.MoveTo(helper.middleAngle, r * 0.07),
|
||||
["L", (r * 0.07) * Math.cos(middleTheta) + (r * 0.87) * Math.cos(startTheta) + x, (r * 0.07) * Math.sin(middleTheta) + (r * 0.87) * Math.sin(startTheta) + y],
|
||||
["A", (r * innerRadiusPercent), (r * innerRadiusPercent), 0, 0, 1, (r * 0.07) * Math.cos(middleTheta) + (r * 0.87) * Math.cos(endTheta) + x, (r * 0.07) * Math.sin(middleTheta) + (r * 0.87) * Math.sin(endTheta) + y],
|
||||
helper.Close()];
|
||||
|
||||
linePathString = [helper.MoveTo(helper.startAngle, r),
|
||||
helper.ArcTo(r, helper.endAngle, r),
|
||||
helper.ArcBackTo(r, helper.startAngle, r)];
|
||||
|
||||
helper.setTitlePos();
|
||||
|
||||
return {
|
||||
slicePathString: slicePathString,
|
||||
linePathString: linePathString,
|
||||
titlePosX: helper.titlePosX,
|
||||
titlePosY: helper.titlePosY
|
||||
};
|
||||
};
|
||||
|
||||
///#source 1 1 /js/source/slicePath/wheelnav.slicePath.OuterStroke.js
|
||||
|
||||
this.OuterStrokeSlice = function (helper, percent, custom) {
|
||||
|
||||
helper.setBaseValue(percent, custom);
|
||||
x = helper.centerX;
|
||||
y = helper.centerY;
|
||||
|
||||
r = helper.sliceRadius;
|
||||
innerRadius = r / 4;
|
||||
|
||||
if (helper.sliceAngle < 120) { helper.titleRadius = r * 0.57; }
|
||||
else if (helper.sliceAngle < 180) { helper.titleRadius = r * 0.52; }
|
||||
else { helper.titleRadius = r * 0.45; }
|
||||
|
||||
linePathString = [helper.MoveTo(helper.startAngle, innerRadius),
|
||||
helper.LineTo(helper.startAngle, r),
|
||||
helper.MoveTo(helper.endAngle, innerRadius),
|
||||
helper.LineTo(helper.endAngle, r)];
|
||||
|
||||
slicePathString = [helper.MoveTo(helper.startAngle, r),
|
||||
helper.ArcTo(r, helper.endAngle, r),
|
||||
helper.ArcBackTo(r, helper.startAngle, r),
|
||||
helper.MoveTo(helper.startAngle, innerRadius),
|
||||
helper.ArcTo(innerRadius, helper.endAngle, innerRadius),
|
||||
helper.ArcBackTo(innerRadius, helper.startAngle, innerRadius)];
|
||||
|
||||
helper.setTitlePos();
|
||||
|
||||
return {
|
||||
slicePathString: slicePathString,
|
||||
linePathString: linePathString,
|
||||
titlePosX: helper.titlePosX,
|
||||
titlePosY: helper.titlePosY
|
||||
};
|
||||
};
|
||||
|
||||
///#source 1 1 /js/source/slicePath/wheelnav.slicePath.Tab.js
|
||||
|
||||
this.TabSlice = function (helper, percent, custom) {
|
||||
|
||||
var rOriginal = helper.wheelRadius * 0.9;
|
||||
var navItemCount = 360 / helper.sliceAngle;
|
||||
var itemSize = 2 * rOriginal / navItemCount;
|
||||
|
||||
x = helper.centerX;
|
||||
y = helper.centerY;
|
||||
itemIndex = helper.itemIndex;
|
||||
|
||||
titlePosX = x;
|
||||
titlePosY = itemIndex * itemSize + y + (itemSize / 2) - rOriginal;
|
||||
|
||||
slicePathString = [["M", x - (itemSize / 2), itemIndex * itemSize + y - rOriginal],
|
||||
["L", (itemSize / 2) + x, itemIndex * itemSize + y - rOriginal],
|
||||
["L", (itemSize / 2) + x, (itemIndex + 1) * itemSize + y - rOriginal],
|
||||
["L", x - (itemSize / 2), (itemIndex + 1) * itemSize + y - rOriginal],
|
||||
["z"]];
|
||||
|
||||
return {
|
||||
slicePathString: slicePathString,
|
||||
linePathString: "",
|
||||
titlePosX: titlePosX,
|
||||
titlePosY: titlePosY
|
||||
};
|
||||
};
|
||||
|
||||
///#source 1 1 /js/source/slicePath/wheelnav.slicePath.YinYang.js
|
||||
|
||||
this.YinYangSlice = function (helper, percent, custom) {
|
||||
|
||||
helper.setBaseValue(percent, custom);
|
||||
|
||||
r = helper.sliceRadius;
|
||||
|
||||
slicePathString = [helper.MoveToCenter(),
|
||||
helper.ArcTo(r / 2, helper.startAngle, r),
|
||||
helper.ArcTo(r, helper.endAngle, r),
|
||||
helper.ArcBackTo(r / 2, 0, 0),
|
||||
helper.Close()];
|
||||
|
||||
titlePosX = helper.getX(helper.startAngle, r / 2);
|
||||
titlePosY = helper.getY(helper.startAngle, r / 2);
|
||||
|
||||
return {
|
||||
slicePathString: slicePathString,
|
||||
linePathString: slicePathString,
|
||||
titlePosX: titlePosX,
|
||||
titlePosY: titlePosY
|
||||
};
|
||||
};
|
||||
|
||||
///#source 1 1 /js/source/slicePath/wheelnav.slicePath.Web.js
|
||||
|
||||
this.WebSlice = function (helper, percent, custom) {
|
||||
|
||||
helper.setBaseValue(percent, custom);
|
||||
|
||||
r = helper.sliceRadius;
|
||||
|
||||
helper.titleRadius = r * 0.55;
|
||||
helper.setTitlePos();
|
||||
|
||||
linePathString = [helper.MoveToCenter(),
|
||||
helper.LineTo(helper.startAngle, r * 1.1),
|
||||
helper.MoveToCenter(),
|
||||
helper.LineTo(helper.endAngle, r * 1.1),
|
||||
helper.MoveTo(helper.startAngle, r * 0.15),
|
||||
helper.LineTo(helper.endAngle, r * 0.15),
|
||||
helper.MoveTo(helper.startAngle, r * 0.35),
|
||||
helper.LineTo(helper.endAngle, r * 0.35),
|
||||
helper.MoveTo(helper.startAngle, r * 0.55),
|
||||
helper.LineTo(helper.endAngle, r * 0.55),
|
||||
helper.MoveTo(helper.startAngle, r * 0.75),
|
||||
helper.LineTo(helper.endAngle, r * 0.75),
|
||||
helper.MoveTo(helper.startAngle, r * 0.95),
|
||||
helper.LineTo(helper.endAngle, r * 0.95),
|
||||
helper.Close()];
|
||||
|
||||
return {
|
||||
slicePathString: "",
|
||||
linePathString: linePathString,
|
||||
titlePosX: helper.titlePosX,
|
||||
titlePosY: helper.titlePosY
|
||||
};
|
||||
};
|
||||
|
||||
///#source 1 1 /js/source/slicePath/wheelnav.slicePath.Winter.js
|
||||
|
||||
this.WinterSliceCustomization = function () {
|
||||
|
||||
var custom = new slicePathCustomization();
|
||||
custom.titleRadiusPercent = 0.85;
|
||||
custom.arcRadiusPercent = 1;
|
||||
return custom;
|
||||
};
|
||||
|
||||
this.WinterSlice = function (helper, percent, custom) {
|
||||
|
||||
if (custom === null) {
|
||||
custom = WinterSliceCustomization();
|
||||
}
|
||||
|
||||
helper.setBaseValue(percent, custom);
|
||||
|
||||
sliceAngle = helper.sliceAngle;
|
||||
|
||||
parallelAngle = helper.startAngle + sliceAngle / 4;
|
||||
parallelAngle2 = helper.startAngle + ((sliceAngle / 4) * 3);
|
||||
borderAngle1 = helper.startAngle + (sliceAngle / 200);
|
||||
borderAngle2 = helper.startAngle + (sliceAngle / 2) - (sliceAngle / 200);
|
||||
borderAngle3 = helper.startAngle + (sliceAngle / 2) + (sliceAngle / 200);
|
||||
borderAngle4 = helper.startAngle + sliceAngle - (sliceAngle / 200);
|
||||
|
||||
var arcRadius = helper.sliceRadius * custom.arcRadiusPercent;
|
||||
|
||||
slicePathString = [helper.MoveToCenter(),
|
||||
helper.MoveTo(parallelAngle, arcRadius / 100),
|
||||
helper.LineTo(borderAngle1, arcRadius / 2),
|
||||
helper.LineTo(parallelAngle, arcRadius - (arcRadius / 100)),
|
||||
helper.LineTo(borderAngle2, arcRadius / 2),
|
||||
helper.LineTo(parallelAngle, arcRadius / 100),
|
||||
helper.MoveTo(parallelAngle2, arcRadius / 100),
|
||||
helper.LineTo(borderAngle4, arcRadius / 2),
|
||||
helper.LineTo(parallelAngle2, arcRadius - (arcRadius / 100)),
|
||||
helper.LineTo(borderAngle3, arcRadius / 2),
|
||||
helper.LineTo(parallelAngle2, arcRadius / 100),
|
||||
helper.Close()];
|
||||
|
||||
linePathString = [helper.MoveTo(parallelAngle, arcRadius),
|
||||
helper.LineTo(borderAngle2, arcRadius / 2),
|
||||
helper.MoveTo(borderAngle3, arcRadius / 2),
|
||||
helper.LineTo(parallelAngle2, arcRadius)];
|
||||
|
||||
return {
|
||||
slicePathString: slicePathString,
|
||||
linePathString: linePathString,
|
||||
titlePosX: helper.titlePosX,
|
||||
titlePosY: helper.titlePosY
|
||||
};
|
||||
};
|
||||
|
||||
///#source 1 1 /js/source/slicePath/wheelnav.slicePath.Tutorial.js
|
||||
|
||||
this.TutorialSliceCustomization = function () {
|
||||
|
||||
var custom = new slicePathCustomization();
|
||||
custom.titleRadiusPercent = 0.6;
|
||||
custom.isMoveTo = false;
|
||||
custom.isLineTo = false;
|
||||
custom.isArcTo = false;
|
||||
custom.isArcBackTo = false;
|
||||
return custom;
|
||||
};
|
||||
|
||||
this.TutorialSlice = function (helper, percent, custom) {
|
||||
|
||||
if (custom === null) {
|
||||
custom = TutorialSliceCustomization();
|
||||
}
|
||||
|
||||
helper.setBaseValue(percent, custom);
|
||||
|
||||
slicePathString = [];
|
||||
|
||||
slicePathString.push(helper.MoveToCenter());
|
||||
if (custom.isMoveTo === true) {
|
||||
slicePathString.push(helper.MoveTo(helper.middleAngle, helper.sliceRadius / 4));
|
||||
}
|
||||
if (custom.isLineTo) {
|
||||
slicePathString.push(helper.LineTo(helper.startAngle, helper.sliceRadius));
|
||||
}
|
||||
if (custom.isArcTo) {
|
||||
slicePathString.push(helper.ArcTo(helper.sliceRadius, helper.middleAngle, helper.sliceRadius));
|
||||
}
|
||||
if (custom.isArcBackTo) {
|
||||
slicePathString.push(helper.ArcBackTo(helper.sliceRadius, helper.endAngle, helper.sliceRadius));
|
||||
}
|
||||
slicePathString.push(helper.Close());
|
||||
|
||||
linePathString = [helper.MoveToCenter(),
|
||||
helper.LineTo(helper.startAngle, helper.sliceRadius),
|
||||
helper.ArcTo(helper.sliceRadius, helper.endAngle, helper.sliceRadius),
|
||||
helper.Close()];
|
||||
|
||||
return {
|
||||
slicePathString: slicePathString,
|
||||
linePathString: linePathString,
|
||||
titlePosX: helper.titlePosX,
|
||||
titlePosY: helper.titlePosY
|
||||
};
|
||||
};
|
||||
|
||||
///#source 1 1 /js/source/slicePath/wheelnav.slicePathEnd.js
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
/* jshint unused: false */
|
||||
/* global window, $, Backbone, document, arangoCollectionModel*/
|
||||
/* global arangoHelper, btoa, dashboardView, arangoDatabase, _, frontendConfig */
|
||||
/* global $, arangoHelper, btoa, dashboardView, arangoDatabase, _, frontendConfig */
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
|
|
@ -41,6 +41,7 @@
|
|||
'logs': 'logs',
|
||||
'helpus': 'helpUs',
|
||||
'graph2/:name': 'graph2',
|
||||
'graph2/:name/settings': 'graph2settings',
|
||||
'support': 'support'
|
||||
},
|
||||
|
||||
|
|
@ -677,14 +678,24 @@
|
|||
this.waitForInit(this.graph2.bind(this), name);
|
||||
return;
|
||||
}
|
||||
if (!this.graphViewer2) {
|
||||
this.graphViewer2 = new window.GraphViewer2({
|
||||
name: name
|
||||
});
|
||||
}
|
||||
this.graphViewer2 = new window.GraphViewer2({
|
||||
name: name
|
||||
});
|
||||
this.graphViewer2.render();
|
||||
},
|
||||
|
||||
graph2settings: function (name, initialized) {
|
||||
this.checkUser();
|
||||
if (!initialized) {
|
||||
this.waitForInit(this.graph2settings.bind(this), name);
|
||||
return;
|
||||
}
|
||||
this.graphSettingsView = new window.GraphSettingsView({
|
||||
name: name
|
||||
});
|
||||
this.graphSettingsView.render();
|
||||
},
|
||||
|
||||
helpUs: function (initialized) {
|
||||
this.checkUser();
|
||||
if (!initialized) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
<script id="graphSettingsView.ejs" type="text/template">
|
||||
|
||||
<% var genClass = 'pure-u-1-2'; %>
|
||||
|
||||
<% var formatName = function(name) { %>
|
||||
<% var formattedName = %>
|
||||
<% return name.charAt(0).toUpperCase() + string.slice(1);%>
|
||||
<% }; %>
|
||||
|
||||
<div id="shardsContent" class="innerContent">
|
||||
|
||||
<div class="pure-g" style="margin-top: -15px">
|
||||
|
||||
<div class="pure-u-1-1 pure-u-md-1-1 pure-u-lg-1-1 pure-u-xl-1-2">
|
||||
|
||||
<div class="sectionHeader pure-g">
|
||||
<div class="pure-u-1-1">
|
||||
<div class="title">
|
||||
Graph specific
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g pure-table pure-table-header pure-title">
|
||||
<div class="pure-table-row">
|
||||
<div class="<%= genClass %> left">Name</div>
|
||||
<div class="<%= genClass %> left">Property</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g pure-table pure-table-body">
|
||||
<% _.each(specific, function(val, key) { %>
|
||||
<div class="<%= genClass %> left"><%=key%></div>
|
||||
<div class="<%= genClass %> left"><%=val%></div>
|
||||
<% }); %>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="pure-u-1-1 pure-u-md-1-1 pure-u-lg-1-1 pure-u-xl-1-2">
|
||||
|
||||
<div class="sectionHeader pure-g">
|
||||
<div class="pure-u-1-1">
|
||||
<div class="title">
|
||||
General
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g pure-table pure-table-header pure-title">
|
||||
<div class="pure-table-row">
|
||||
<div class="<%= genClass %> left">Name</div>
|
||||
<div class="<%= genClass %> left">Property</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g pure-table pure-table-body">
|
||||
<% _.each(general, function(val, key) { %>
|
||||
<div class="<%= genClass %> left"><%=key%></div>
|
||||
<div class="<%= genClass %> left"><%=val%></div>
|
||||
<% }); %>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<button id="saveGraphSettings" style="margin-top: 20px;" class="button-success pull-right">Save</button>
|
||||
</div>
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
/* jshint browser: true */
|
||||
/* jshint unused: false */
|
||||
/* global arangoHelper, Backbone, templateEngine, $, window*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
window.GraphSettingsView = Backbone.View.extend({
|
||||
el: '#content',
|
||||
|
||||
general: {
|
||||
'layout': undefined,
|
||||
'depth': undefined
|
||||
},
|
||||
|
||||
specific: {
|
||||
'node_label': undefined,
|
||||
'node_color': undefined,
|
||||
'node_size': undefined
|
||||
},
|
||||
|
||||
template: templateEngine.createTemplate('graphSettingsView.ejs'),
|
||||
|
||||
initialize: function (options) {
|
||||
this.name = options.name;
|
||||
},
|
||||
|
||||
events: {
|
||||
},
|
||||
|
||||
render: function () {
|
||||
$(this.el).html(this.template.render({
|
||||
general: this.general,
|
||||
specific: this.specific
|
||||
}));
|
||||
arangoHelper.buildGraphSubNav(this.name, 'Settings');
|
||||
}
|
||||
|
||||
});
|
||||
}());
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
/*jshint browser: true */
|
||||
/*jshint unused: false */
|
||||
/*global arangoHelper, document, sigma, Backbone, templateEngine, $, window*/
|
||||
/* jshint browser: true */
|
||||
/* jshint unused: false */
|
||||
/* global arangoHelper, slicePath, icon, wheelnav, document, sigma, Backbone, templateEngine, $, window*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
|
|
@ -14,18 +14,20 @@
|
|||
this.initSigma();
|
||||
},
|
||||
|
||||
initSigma: function() {
|
||||
//init sigma
|
||||
sigma.classes.graph.addMethod('neighbors', function(nodeId) {
|
||||
var k,
|
||||
neighbors = {},
|
||||
index = this.allNeighborsIndex[nodeId] || {};
|
||||
initSigma: function () {
|
||||
// init sigma
|
||||
try {
|
||||
sigma.classes.graph.addMethod('neighbors', function (nodeId) {
|
||||
var k;
|
||||
var neighbors = {};
|
||||
var index = this.allNeighborsIndex[nodeId] || {};
|
||||
|
||||
for (k in index) {
|
||||
neighbors[k] = this.nodesIndex[k];
|
||||
for (k in index) {
|
||||
neighbors[k] = this.nodesIndex[k];
|
||||
}
|
||||
return neighbors;
|
||||
});
|
||||
return neighbors;
|
||||
});
|
||||
} catch (ignore) {}
|
||||
},
|
||||
|
||||
render: function () {
|
||||
|
|
@ -52,52 +54,73 @@
|
|||
});
|
||||
},
|
||||
|
||||
clearOldContextMenu: function() {
|
||||
clearOldContextMenu: function () {
|
||||
$('#nodeContextMenu').remove();
|
||||
},
|
||||
|
||||
createNodeContextMenu: function(nodeId, e) {
|
||||
createNodeContextMenu: function (nodeId, e) {
|
||||
var self = this;
|
||||
|
||||
var x = e.data.node["renderer1:x"];
|
||||
var y = e.data.node["renderer1:y"];
|
||||
var x = e.data.node['renderer1:x'];
|
||||
var y = e.data.node['renderer1:y'];
|
||||
|
||||
this.clearOldContextMenu();
|
||||
var string = '<div id="nodeContextMenu" class="nodeContextMenu">' +
|
||||
'<nav class="circular-menu">' +
|
||||
'<div class="circle">' +
|
||||
'<a class="fa fa-home fa-2x"></a>' +
|
||||
'<a class="fa fa-facebook fa-2x"></a>' +
|
||||
'<a class="fa fa-twitter fa-2x"></a>' +
|
||||
'<a class="fa fa-linkedin fa-2x"></a>' +
|
||||
'<a class="fa fa-github fa-2x"></a>' +
|
||||
'<a class="fa fa-rss fa-2x"></a>' +
|
||||
'<a class="fa fa-pinterest fa-2x"></a>' +
|
||||
'<a class="fa fa-asterisk fa-2x"></a>' +
|
||||
'</div>' +
|
||||
'<a class="menu-button fa fa-bars fa-2x"></a>'+
|
||||
'</nav>';
|
||||
var string = '<div id="nodeContextMenu" class="nodeContextMenu"></div>';
|
||||
$('#graph-container').append(string);
|
||||
|
||||
var generateMenu = function(e) {
|
||||
var generateMenu = function (e, nodeId) {
|
||||
var hotaru = ['#364C4A', '#497C7F', '#92C5C0', '#858168', '#CCBCA5'];
|
||||
var wheel = new wheelnav('nodeContextMenu');
|
||||
wheel.maxPercent = 1.0;
|
||||
wheel.wheelRadius = 50;
|
||||
wheel.clockwise = false;
|
||||
wheel.colors = hotaru;
|
||||
wheel.clickModeRotate = false;
|
||||
wheel.slicePathFunction = slicePath().DonutSlice;
|
||||
wheel.createWheel([icon.edit, icon.trash, icon.smallgear, icon.smallgear]);
|
||||
|
||||
var items = document.querySelectorAll('#nodeContextMenu .circle a');
|
||||
|
||||
for(var i = 0, l = items.length; i < l; i++) {
|
||||
items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
|
||||
|
||||
items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
|
||||
}
|
||||
document.querySelector('#nodeContextMenu .circle').classList.toggle('open');
|
||||
// add menu events
|
||||
|
||||
// function 0: edit
|
||||
wheel.navItems[0].navigateFunction = function () {
|
||||
self.clearOldContextMenu();
|
||||
self.editNode(nodeId);
|
||||
};
|
||||
|
||||
// function 1:
|
||||
wheel.navItems[1].navigateFunction = function () {
|
||||
self.clearOldContextMenu();
|
||||
self.editNode(nodeId);
|
||||
};
|
||||
|
||||
$('#graph-container').append(string);
|
||||
$('#nodeContextMenu').css('left', x + 40);
|
||||
$('#nodeContextMenu').css('top', y);
|
||||
generateMenu(e);
|
||||
// function 2:
|
||||
wheel.navItems[2].navigateFunction = function () {
|
||||
self.clearOldContextMenu();
|
||||
self.editNode(nodeId);
|
||||
};
|
||||
|
||||
// function 3: delete
|
||||
wheel.navItems[3].navigateFunction = function () {
|
||||
self.clearOldContextMenu();
|
||||
self.editNode(nodeId);
|
||||
};
|
||||
};
|
||||
|
||||
$('#nodeContextMenu').css('left', x + 115);
|
||||
$('#nodeContextMenu').css('top', y + 72);
|
||||
$('#nodeContextMenu').width(100);
|
||||
$('#nodeContextMenu').height(100);
|
||||
|
||||
generateMenu(e, nodeId);
|
||||
},
|
||||
|
||||
renderGraph: function(graph) {
|
||||
editNode: function (id) {
|
||||
var callback = function () {};
|
||||
|
||||
arangoHelper.openDocEditor(id, 'doc', callback);
|
||||
},
|
||||
|
||||
renderGraph: function (graph) {
|
||||
var self = this;
|
||||
|
||||
if (graph.edges.left === 0) {
|
||||
|
|
@ -117,9 +140,9 @@
|
|||
minEdgeSize: 0.5,
|
||||
maxEdgeSize: 4,
|
||||
enableEdgeHovering: true,
|
||||
//edgeHoverColor: 'edge',
|
||||
//defaultEdgeHoverColor: '#000',
|
||||
//defaultEdgeType: 'curve',
|
||||
// edgeHoverColor: 'edge',
|
||||
// defaultEdgeHoverColor: '#000',
|
||||
// defaultEdgeType: 'curve',
|
||||
edgeHoverSizeRatio: 1,
|
||||
edgeHoverExtremities: true
|
||||
}
|
||||
|
|
@ -127,10 +150,10 @@
|
|||
|
||||
sigma.plugins.fullScreen({
|
||||
container: 'graph-container',
|
||||
btnId : 'graph-fullscreen-btn'
|
||||
btnId: 'graph-fullscreen-btn'
|
||||
});
|
||||
|
||||
var renderer = 'fruchtermann';
|
||||
var renderer = 'fruchtermann';
|
||||
|
||||
if (renderer === 'noverlap') {
|
||||
var noverlapListener = s.configNoverlap({
|
||||
|
|
@ -138,90 +161,86 @@
|
|||
scaleNodes: 1.05,
|
||||
gridSize: 75,
|
||||
easing: 'quadraticInOut', // animation transition function
|
||||
duration: 10000 // animation duration. Long here for the purposes of this example only
|
||||
duration: 10000 // animation duration. Long here for the purposes of this example only
|
||||
});
|
||||
|
||||
noverlapListener.bind('start stop interpolate', function(e) {
|
||||
if(e.type === 'start') {
|
||||
noverlapListener.bind('start stop interpolate', function (e) {
|
||||
if (e.type === 'start') {
|
||||
}
|
||||
if(e.type === 'interpolate') {
|
||||
if (e.type === 'interpolate') {
|
||||
}
|
||||
});
|
||||
}
|
||||
else if (renderer === 'fruchtermann') {
|
||||
} else if (renderer === 'fruchtermann') {
|
||||
var frListener = sigma.layouts.fruchtermanReingold.configure(s, {
|
||||
iterations: 500,
|
||||
easing: 'quadraticInOut',
|
||||
duration: 800
|
||||
});
|
||||
|
||||
frListener.bind('start stop interpolate', function(e) {
|
||||
});
|
||||
frListener.bind('start stop interpolate', function (e) {});
|
||||
}
|
||||
|
||||
s.graph.nodes().forEach(function(n) {
|
||||
s.graph.nodes().forEach(function (n) {
|
||||
n.originalColor = n.color;
|
||||
});
|
||||
s.graph.edges().forEach(function(e) {
|
||||
s.graph.edges().forEach(function (e) {
|
||||
e.originalColor = e.color;
|
||||
});
|
||||
|
||||
if (document.addEventListener) {
|
||||
document.addEventListener('contextmenu', function(e) {
|
||||
//my custom functionality on right click
|
||||
document.addEventListener('contextmenu', function (e) {
|
||||
// my custom functionality on right click
|
||||
e.preventDefault();
|
||||
}, false);
|
||||
} else {
|
||||
document.attachEvent('oncontextmenu', function() {
|
||||
//my custom functionality on right click
|
||||
document.attachEvent('oncontextmenu', function () {
|
||||
// my custom functionality on right click
|
||||
window.event.returnValue = false;
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
s.bind('rightClickNode', function(e) {
|
||||
s.bind('rightClickNode', function (e) {
|
||||
var nodeId = e.data.node.id;
|
||||
self.createNodeContextMenu(nodeId, e);
|
||||
});
|
||||
|
||||
s.bind('doubleClickNode', function(e) {
|
||||
var nodeId = e.data.node.id,
|
||||
toKeep = s.graph.neighbors(nodeId);
|
||||
toKeep[nodeId] = e.data.node;
|
||||
s.bind('doubleClickNode', function (e) {
|
||||
var nodeId = e.data.node.id;
|
||||
var toKeep = s.graph.neighbors(nodeId);
|
||||
toKeep[nodeId] = e.data.node;
|
||||
|
||||
s.graph.nodes().forEach(function(n) {
|
||||
if (toKeep[n.id]) {
|
||||
n.color = n.originalColor;
|
||||
}
|
||||
else {
|
||||
n.color = '#eee';
|
||||
}
|
||||
});
|
||||
s.graph.nodes().forEach(function (n) {
|
||||
if (toKeep[n.id]) {
|
||||
n.color = n.originalColor;
|
||||
} else {
|
||||
n.color = '#eee';
|
||||
}
|
||||
});
|
||||
|
||||
s.graph.edges().forEach(function(e) {
|
||||
if (toKeep[e.source] && toKeep[e.target]) {
|
||||
e.color = 'rgb(64, 74, 83)';
|
||||
}
|
||||
else {
|
||||
e.color = '#eee';
|
||||
}
|
||||
});
|
||||
s.graph.edges().forEach(function (e) {
|
||||
if (toKeep[e.source] && toKeep[e.target]) {
|
||||
e.color = 'rgb(64, 74, 83)';
|
||||
} else {
|
||||
e.color = '#eee';
|
||||
}
|
||||
});
|
||||
|
||||
s.refresh();
|
||||
s.refresh();
|
||||
});
|
||||
|
||||
s.bind('doubleClickStage', function() {
|
||||
s.graph.nodes().forEach(function(n) {
|
||||
s.bind('doubleClickStage', function () {
|
||||
s.graph.nodes().forEach(function (n) {
|
||||
n.color = n.originalColor;
|
||||
});
|
||||
|
||||
s.graph.edges().forEach(function(e) {
|
||||
s.graph.edges().forEach(function (e) {
|
||||
e.color = e.originalColor;
|
||||
});
|
||||
|
||||
s.refresh();
|
||||
});
|
||||
|
||||
s.bind('clickStage', function() {
|
||||
s.bind('clickStage', function () {
|
||||
self.clearOldContextMenu();
|
||||
});
|
||||
|
||||
|
|
@ -231,25 +250,21 @@
|
|||
s.startNoverlap();
|
||||
// allow draggin nodes
|
||||
dragListener = sigma.plugins.dragNodes(s, s.renderers[0]);
|
||||
}
|
||||
else if (renderer === 'force') {
|
||||
} else if (renderer === 'force') {
|
||||
s.startForceAtlas2({worker: true, barnesHutOptimize: false});
|
||||
|
||||
window.setTimeout(function() {
|
||||
window.setTimeout(function () {
|
||||
s.stopForceAtlas2();
|
||||
dragListener = sigma.plugins.dragNodes(s, s.renderers[0]);
|
||||
console.log("stopped force");
|
||||
console.log('stopped force');
|
||||
}, 3000);
|
||||
}
|
||||
else if (renderer === 'fruchtermann') {
|
||||
} else if (renderer === 'fruchtermann') {
|
||||
// Start the Fruchterman-Reingold algorithm:
|
||||
sigma.layouts.fruchtermanReingold.start(s);
|
||||
dragListener = sigma.plugins.dragNodes(s, s.renderers[0]);
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
dragListener = sigma.plugins.dragNodes(s, s.renderers[0]);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -50,6 +50,7 @@
|
|||
}
|
||||
|
||||
.innerDiv {
|
||||
margin-top: 25px;
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -44,89 +44,9 @@
|
|||
|
||||
position: fixed;
|
||||
|
||||
.circular-menu {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
svg {
|
||||
path {
|
||||
font-size: 2pt !important;
|
||||
}
|
||||
}
|
||||
|
||||
.circle {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
opacity: 0;
|
||||
|
||||
-webkit-transform: scale(0);
|
||||
-moz-transform: scale(0);
|
||||
transform: scale(0);
|
||||
|
||||
-webkit-transition: all 0.4s ease-out;
|
||||
-moz-transition: all 0.4s ease-out;
|
||||
transition: all 0.4s ease-out;
|
||||
}
|
||||
|
||||
.open.circle {
|
||||
opacity: 1;
|
||||
|
||||
-webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.circle a {
|
||||
text-decoration: none;
|
||||
color: $c-black;
|
||||
display: block;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
line-height: 40px;
|
||||
margin-left: -20px;
|
||||
margin-top: -20px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.circle a:hover {
|
||||
color: #eef;
|
||||
}
|
||||
|
||||
.menu-button {
|
||||
position: absolute;
|
||||
top: calc(50% - 30px);
|
||||
left: calc(50% - 30px);
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
color: #444;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
line-height: 40px;
|
||||
padding: 10px;
|
||||
background: rgba(0, 0, 0, .2);
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.menu-button:hover {
|
||||
background-color: #eef;
|
||||
}
|
||||
|
||||
/* Author stuff */
|
||||
h1.author {
|
||||
text-align:center;
|
||||
color: white;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
h1.author a {
|
||||
color: #348;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
h1.author a:hover {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue