mirror of
https://github.com/UnickSoft/graphonline.git
synced 2025-07-01 15:26:12 +00:00
565 lines
18 KiB
JavaScript
565 lines
18 KiB
JavaScript
/**
|
|
* Graph drawer.
|
|
*/
|
|
|
|
|
|
const lineDashTypes = [
|
|
[],
|
|
[4, 4],
|
|
[12, 12],
|
|
[16, 4, 4, 4],
|
|
];
|
|
|
|
// Common text position
|
|
const WeightTextCenter = 0,
|
|
WeightTextUp = 1;
|
|
|
|
function BaseEdgeStyle()
|
|
{
|
|
this.baseStyles = [];
|
|
}
|
|
|
|
BaseEdgeStyle.prototype.GetStyle = function (baseStyle, object)
|
|
{
|
|
this.baseStyles.forEach(function(element) {
|
|
var styleObject = globalApplication.GetStyle("edge", element, object);
|
|
baseStyle = styleObject.GetStyle(baseStyle, object);
|
|
});
|
|
|
|
if (this.hasOwnProperty('weightText'))
|
|
baseStyle.weightText = this.weightText;
|
|
if (this.hasOwnProperty('strokeStyle'))
|
|
baseStyle.strokeStyle = this.strokeStyle;
|
|
if (this.hasOwnProperty('fillStyle'))
|
|
baseStyle.fillStyle = this.fillStyle;
|
|
if (this.hasOwnProperty('textPadding'))
|
|
baseStyle.textPadding = this.textPadding;
|
|
if (this.hasOwnProperty('textStrokeWidth'))
|
|
baseStyle.textStrokeWidth = this.textStrokeWidth;
|
|
if (this.hasOwnProperty('lineDash'))
|
|
baseStyle.lineDash = this.lineDash;
|
|
if (this.hasOwnProperty('additionalTextColor'))
|
|
baseStyle.additionalTextColor = this.additionalTextColor;
|
|
if (this.hasOwnProperty('weightPosition'))
|
|
baseStyle.weightPosition = this.weightPosition;
|
|
|
|
return this.FixNewFields(baseStyle);
|
|
}
|
|
|
|
BaseEdgeStyle.prototype.FixNewFields = function (style)
|
|
{
|
|
if (!style.hasOwnProperty('lineDash'))
|
|
style.lineDash = 0;
|
|
|
|
if (!style.hasOwnProperty('weightPosition'))
|
|
style.weightPosition = WeightTextCenter;
|
|
|
|
return style;
|
|
}
|
|
|
|
BaseEdgeStyle.prototype.Clear = function ()
|
|
{
|
|
delete this.weightText;
|
|
delete this.strokeStyle;
|
|
delete this.fillStyle;
|
|
delete this.textPadding;
|
|
delete this.textStrokeWidth;
|
|
delete this.lineDash;
|
|
delete this.additionalTextColor;
|
|
delete this.weightPosition;
|
|
}
|
|
|
|
BaseEdgeStyle.prototype.ShouldLoad = function (field)
|
|
{
|
|
return field != "baseStyles";
|
|
}
|
|
|
|
function CommonEdgeStyle()
|
|
{
|
|
BaseEdgeStyle.apply(this, arguments);
|
|
|
|
this.strokeStyle = '#c7b7c7';
|
|
this.weightText = '#f0d543';
|
|
this.fillStyle = '#68aeba';
|
|
this.textPadding = 4;
|
|
this.textStrokeWidth = 2;
|
|
this.lineDash = 0;
|
|
this.additionalTextColor = '#c7b7c7';
|
|
this.weightPosition = WeightTextCenter;
|
|
}
|
|
|
|
CommonEdgeStyle.prototype = Object.create(BaseEdgeStyle.prototype);
|
|
|
|
function CommonPrintEdgeStyle()
|
|
{
|
|
BaseEdgeStyle.apply(this, arguments);
|
|
|
|
this.strokeStyle = '#000000';
|
|
this.weightText = '#000000';
|
|
this.fillStyle = '#FFFFFF';
|
|
this.textPadding = 4;
|
|
this.textStrokeWidth = 2;
|
|
|
|
this.baseStyles.push("common");
|
|
}
|
|
CommonPrintEdgeStyle.prototype = Object.create(BaseEdgeStyle.prototype);
|
|
|
|
function SelectedEdgeStyle0()
|
|
{
|
|
BaseEdgeStyle.apply(this, arguments);
|
|
|
|
this.strokeStyle = '#f0d543';
|
|
this.weightText = '#f0d543';
|
|
this.fillStyle = '#c7627a';
|
|
|
|
this.baseStyles.push("common");
|
|
}
|
|
SelectedEdgeStyle0.prototype = Object.create(BaseEdgeStyle.prototype);
|
|
|
|
function SelectedEdgeStyle1()
|
|
{
|
|
BaseEdgeStyle.apply(this, arguments);
|
|
|
|
this.strokeStyle = '#8FBF83';
|
|
this.weightText = '#8FBF83';
|
|
this.fillStyle = '#F9F9D5';
|
|
|
|
this.baseStyles.push("selected");
|
|
}
|
|
SelectedEdgeStyle1.prototype = Object.create(BaseEdgeStyle.prototype);
|
|
|
|
function SelectedEdgeStyle2()
|
|
{
|
|
BaseEdgeStyle.apply(this, arguments);
|
|
|
|
this.strokeStyle = '#8C4C86';
|
|
this.weightText = '#8C4C86';
|
|
this.fillStyle = '#253267';
|
|
|
|
this.baseStyles.push("selected");
|
|
}
|
|
SelectedEdgeStyle2.prototype = Object.create(BaseEdgeStyle.prototype);
|
|
|
|
|
|
function SelectedEdgeStyle3()
|
|
{
|
|
BaseEdgeStyle.apply(this, arguments);
|
|
|
|
this.strokeStyle = '#6188FF';
|
|
this.weightText = '#6188FF';
|
|
this.fillStyle = '#E97CF9';
|
|
|
|
this.baseStyles.push("selected");
|
|
}
|
|
SelectedEdgeStyle3.prototype = Object.create(BaseEdgeStyle.prototype);
|
|
|
|
|
|
function SelectedEdgeStyle4()
|
|
{
|
|
BaseEdgeStyle.apply(this, arguments);
|
|
|
|
this.strokeStyle = '#C6B484';
|
|
this.weightText = '#C6B484';
|
|
this.fillStyle = '#E0DEE1';
|
|
|
|
this.baseStyles.push("selected");
|
|
}
|
|
SelectedEdgeStyle4.prototype = Object.create(BaseEdgeStyle.prototype);
|
|
|
|
function SelectedEdgePrintStyle()
|
|
{
|
|
BaseEdgeStyle.apply(this, arguments);
|
|
|
|
this.strokeStyle = '#AAAAAA';
|
|
this.weightText = '#000000';
|
|
this.fillStyle = '#AAAAAA';
|
|
|
|
this.baseStyles.push("printed");
|
|
}
|
|
SelectedEdgePrintStyle.prototype = Object.create(BaseEdgeStyle.prototype);
|
|
|
|
var DefaultSelectedEdgeStyles = [new SelectedEdgeStyle0(), new SelectedEdgeStyle1(),
|
|
new SelectedEdgeStyle2(), new SelectedEdgeStyle3(), new SelectedEdgeStyle4()];
|
|
|
|
var DefaultPrintSelectedEdgeStyles = [new SelectedEdgePrintStyle()];
|
|
|
|
function BaseEdgeDrawer(context, drawObjects)
|
|
{
|
|
if (drawObjects === undefined)
|
|
{
|
|
drawObjects = null;
|
|
}
|
|
|
|
this.context = context;
|
|
|
|
this.drawObject = null;
|
|
this.drawArc = null;
|
|
this.startArrowDirection = null;
|
|
this.finishArrowDirection = null;
|
|
this.textCenterObject = null;
|
|
this.getPointOnArc = null;
|
|
|
|
if (drawObjects)
|
|
{
|
|
if (drawObjects.hasOwnProperty("drawObject"))
|
|
this.drawObject = drawObjects.drawObject;
|
|
if (drawObjects.hasOwnProperty("drawArc"))
|
|
this.drawArc = drawObjects.drawArc;
|
|
if (drawObjects.hasOwnProperty("startArrowDirection"))
|
|
this.startArrowDirection = drawObjects.startArrowDirection;
|
|
if (drawObjects.hasOwnProperty("finishArrowDirection"))
|
|
this.finishArrowDirection = drawObjects.finishArrowDirection;
|
|
if (drawObjects.hasOwnProperty("textCenterObject"))
|
|
this.textCenterObject = drawObjects.textCenterObject;
|
|
if (drawObjects.hasOwnProperty("getPointOnArc"))
|
|
this.getPointOnArc = drawObjects.getPointOnArc;
|
|
}
|
|
}
|
|
|
|
BaseEdgeDrawer.prototype.Draw = function(baseEdge, arcStyle)
|
|
{
|
|
if (this.drawObject && this.drawObject != this)
|
|
{
|
|
this.drawObject.Draw(baseEdge, arcStyle);
|
|
return;
|
|
}
|
|
|
|
this.SetupStyle(baseEdge, arcStyle);
|
|
|
|
var lengthArrow = Math.max(baseEdge.model.width * 4, 8);
|
|
var widthArrow = Math.max(baseEdge.model.width * 2, 4);
|
|
var position1 = baseEdge.vertex1.position;
|
|
var position2 = baseEdge.vertex2.position;
|
|
var direction = position1.subtract(position2);
|
|
direction.normalize(1.0);
|
|
var positions = baseEdge.GetEdgePositionsShift();
|
|
|
|
var hasStartStyle = !position1.equals(position2) && baseEdge.GetStartEdgeStyle() != "";
|
|
var hasFinishStyle = !position1.equals(position2) && baseEdge.GetFinishEdgeStyle() != "";
|
|
|
|
var arcPos1 = positions[0];
|
|
var arcPos2 = positions[1];
|
|
|
|
if (hasStartStyle)
|
|
{
|
|
var dirArrow = this.GetStartArrowDirection(positions[0], positions[1], lengthArrow);
|
|
arcPos1 = arcPos1.add(dirArrow.multiply(lengthArrow / 2));
|
|
}
|
|
|
|
if (hasFinishStyle)
|
|
{
|
|
var dirArrow = this.GetFinishArrowDirection(positions[0], positions[1], lengthArrow);
|
|
arcPos2 = arcPos2.add(dirArrow.multiply(-lengthArrow / 2));
|
|
}
|
|
|
|
this.DrawArc (arcPos1, arcPos2, arcStyle);
|
|
|
|
this.context.fillStyle = this.context.strokeStyle;
|
|
this.context.lineWidth = 0;
|
|
|
|
if (hasStartStyle)
|
|
{
|
|
this.DrawArrow(positions[0], this.GetStartArrowDirection(positions[0], positions[1], lengthArrow), lengthArrow, widthArrow);
|
|
}
|
|
if (hasFinishStyle)
|
|
{
|
|
this.DrawArrow(positions[1], this.GetFinishArrowDirection(positions[0], positions[1], lengthArrow), lengthArrow, widthArrow);
|
|
}
|
|
|
|
this.SetupStyle(baseEdge, arcStyle);
|
|
|
|
if (arcStyle.weightPosition == WeightTextCenter)
|
|
{
|
|
if (baseEdge.GetText().length > 0)
|
|
{
|
|
this.DrawWeight(positions[0], positions[1], baseEdge.GetText(), arcStyle, false);
|
|
}
|
|
|
|
if (baseEdge.GetUpText().length > 0)
|
|
{
|
|
this.DrawUpText(positions[0], positions[1], baseEdge.GetUpText(), arcStyle, false, arcStyle.additionalTextColor, baseEdge.model.width / 2 + 20, null);
|
|
}
|
|
}
|
|
else if (arcStyle.weightPosition == WeightTextUp)
|
|
{
|
|
if (baseEdge.GetText().length > 0)
|
|
{
|
|
this.DrawUpText(positions[0], positions[1], baseEdge.GetText(), arcStyle, false, arcStyle.weightText, baseEdge.model.width / 2 + 10, "16px");
|
|
}
|
|
|
|
if (baseEdge.GetUpText().length > 0)
|
|
{
|
|
this.DrawUpText(positions[0], positions[1], baseEdge.GetUpText(), arcStyle, false, arcStyle.additionalTextColor, - baseEdge.model.width / 2 - 15, null);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
BaseEdgeDrawer.prototype.SetupStyle = function(baseEdge, arcStyle)
|
|
{
|
|
this.context.lineWidth = baseEdge.model.width;
|
|
this.context.strokeStyle = arcStyle.strokeStyle;
|
|
this.context.fillStyle = arcStyle.fillStyle;
|
|
this.model = baseEdge.model;
|
|
this.style = arcStyle;
|
|
}
|
|
|
|
BaseEdgeDrawer.prototype.DrawArc = function(position1, position2, arcStyle)
|
|
{
|
|
if (this.drawArc && this.drawArc != this)
|
|
{
|
|
this.drawArc.DrawArc(position1, position2, arcStyle);
|
|
return;
|
|
}
|
|
|
|
this.context.setLineDash(lineDashTypes[arcStyle.lineDash]);
|
|
if (position1.equals(position2))
|
|
{
|
|
this.context.beginPath();
|
|
this.context.arc(position1.x - Math.cos(this.model.GetLoopShiftAngel()) * this.model.GetLoopSize(),
|
|
position1.y - Math.sin(this.model.GetLoopShiftAngel()) * this.model.GetLoopSize(), this.model.GetLoopSize(), 0, 2 * Math.PI);
|
|
this.context.stroke();
|
|
}
|
|
else
|
|
{
|
|
this.context.beginPath();
|
|
this.context.moveTo(position1.x, position1.y);
|
|
this.context.lineTo(position2.x, position2.y);
|
|
this.context.stroke();
|
|
}
|
|
this.context.setLineDash([]);
|
|
}
|
|
|
|
BaseEdgeDrawer.prototype.DrawWeight = function(position1, position2, text, arcStyle, hasPair)
|
|
{
|
|
var centerPoint = this.GetTextCenterPoint(position1, position2, hasPair, arcStyle);
|
|
|
|
this.context.font = "bold 16px sans-serif";
|
|
this.context.textBaseline = "middle";
|
|
this.context.lineWidth = arcStyle.textStrokeWidth;
|
|
this.context.fillStyle = arcStyle.fillStyle;
|
|
|
|
var widthText = this.context.measureText(text).width;
|
|
|
|
this.context.beginPath();
|
|
this.context.rect(centerPoint.x - widthText / 2 - arcStyle.textPadding / 2,
|
|
centerPoint.y - 8 - arcStyle.textPadding / 2,
|
|
widthText + arcStyle.textPadding, 16 + arcStyle.textPadding);
|
|
this.context.closePath();
|
|
this.context.fill();
|
|
this.context.stroke ();
|
|
|
|
this.context.fillStyle = arcStyle.weightText;
|
|
this.context.fillText(text, centerPoint.x - widthText / 2, centerPoint.y);
|
|
}
|
|
|
|
BaseEdgeDrawer.prototype.DrawUpText = function(position1, position2, text, arcStyle, hasPair, color, offset, fontSize)
|
|
{
|
|
var centerPoint = this.GetTextCenterPoint(position1, position2, hasPair, arcStyle);
|
|
|
|
this.context.font = fontSize == null ? "bold 12px sans-serif" : "bold " + fontSize + " sans-serif";
|
|
this.context.textBaseline = "middle";
|
|
|
|
var widthText = this.context.measureText(text).width;
|
|
|
|
this.context.fillStyle = color;
|
|
|
|
var vectorEdge = new Point(position2.x - position1.x, position2.y - position1.y);
|
|
var angleRadians = Math.atan2(vectorEdge.y, vectorEdge.x);
|
|
if (angleRadians > Math.PI / 2 || angleRadians < -Math.PI / 2)
|
|
{
|
|
vectorEdge = new Point(position1.x - position2.x, position1.y - position2.y);
|
|
angleRadians = Math.atan2(vectorEdge.y, vectorEdge.x);
|
|
}
|
|
var normalize = vectorEdge.normal().normalizeCopy(offset);
|
|
this.context.save();
|
|
this.context.translate(centerPoint.x - normalize.x, centerPoint.y - normalize.y);
|
|
this.context.rotate(angleRadians);
|
|
this.context.textAlign = "center";
|
|
|
|
this.context.fillText(text, 0, 0);
|
|
|
|
this.context.restore();
|
|
}
|
|
|
|
BaseEdgeDrawer.prototype.DrawArrow = function(position, direction, length, width)
|
|
{
|
|
var normal = direction.normal();
|
|
|
|
var pointOnLine = position.subtract(direction.multiply(length));
|
|
var point1 = pointOnLine.add(normal.multiply(width));
|
|
var point2 = pointOnLine.add(normal.multiply(-width));
|
|
|
|
this.context.beginPath();
|
|
this.context.moveTo(position.x, position.y);
|
|
this.context.lineTo(point1.x, point1.y);
|
|
this.context.lineTo(point2.x, point2.y);
|
|
this.context.lineTo(position.x, position.y);
|
|
this.context.closePath();
|
|
this.context.fill();
|
|
}
|
|
|
|
BaseEdgeDrawer.prototype.GetStartArrowDirection = function(position1, position2, lengthArrow)
|
|
{
|
|
if (this.startArrowDirection && this.startArrowDirection != this)
|
|
{
|
|
return this.startArrowDirection.GetStartArrowDirection(position1, position2, lengthArrow);
|
|
}
|
|
|
|
var direction = position1.subtract(position2);
|
|
direction.normalize(1.0);
|
|
return direction;
|
|
}
|
|
|
|
BaseEdgeDrawer.prototype.GetFinishArrowDirection = function(position1, position2, lengthArrow)
|
|
{
|
|
if (this.finishArrowDirection && this.finishArrowDirection != this)
|
|
{
|
|
return this.finishArrowDirection.GetFinishArrowDirection(position1, position2, lengthArrow);
|
|
}
|
|
|
|
var direction = position2.subtract(position1);
|
|
direction.normalize(1.0);
|
|
return direction;
|
|
}
|
|
|
|
BaseEdgeDrawer.prototype.GetTextCenterPoint = function (position1, position2, hasPair, arcStyle)
|
|
{
|
|
if (this.textCenterObject && this.textCenterObject != this)
|
|
{
|
|
return this.textCenterObject.GetTextCenterPoint(position1, position2, hasPair, arcStyle);
|
|
}
|
|
|
|
var textShift = Math.min(12 / position1.subtract(position2).length(), 0.4);
|
|
var centerPoint = Point.interpolate(position1, position2, 0.5);
|
|
if (position1.equals(position2))
|
|
{
|
|
let sinVal = Math.sin(this.model.GetLoopShiftAngel());
|
|
let cosVal = Math.cos(this.model.GetLoopShiftAngel());
|
|
centerPoint.x = centerPoint.x - cosVal * this.model.GetLoopSize();
|
|
centerPoint.y = centerPoint.y - (sinVal + Math.sign(sinVal) * 1.0) * this.model.GetLoopSize();
|
|
}
|
|
|
|
return centerPoint;
|
|
}
|
|
|
|
BaseEdgeDrawer.prototype.GetPointOnArc = function (position1, position2, percent)
|
|
{
|
|
if (this.getPointOnArc && this.getPointOnArc != this)
|
|
{
|
|
return this.getPointOnArc.GetPointOnArc(position1, position2, percent);
|
|
}
|
|
|
|
return Point.interpolate(position1, position2, percent);
|
|
}
|
|
|
|
function ProgressArcDrawer(context, baseDrawer, progress)
|
|
{
|
|
this.context = context;
|
|
this.baseDrawer = baseDrawer;
|
|
this.progress = progress;
|
|
}
|
|
|
|
ProgressArcDrawer.prototype = Object.create(BaseEdgeDrawer.prototype);
|
|
|
|
|
|
ProgressArcDrawer.prototype.Draw = function(baseEdge, arcStyle)
|
|
{
|
|
this.baseDrawer.Draw(baseEdge, arcStyle);
|
|
|
|
this.context.lineWidth = 10;
|
|
|
|
var positions = baseEdge.GetEdgePositionsShift();
|
|
var progressSize = 10;
|
|
|
|
if (positions[0].equals(positions[1]))
|
|
{
|
|
var sizeInRadian = progressSize / (2 * Math.PI * this.baseDrawer.model.GetLoopSize()) * 6;
|
|
|
|
this.context.beginPath();
|
|
this.context.arc(positions[0].x - Math.cos(this.baseDrawer.model.GetLoopShiftAngel()) * this.baseDrawer.model.GetLoopSize(),
|
|
positions[0].y - Math.sin(this.baseDrawer.model.GetLoopShiftAngel()) * this.baseDrawer.model.GetLoopSize(), this.baseDrawer.model.GetLoopSize(), this.progress * 2 * Math.PI, this.progress * 2 * Math.PI + sizeInRadian);
|
|
this.context.stroke();
|
|
}
|
|
else
|
|
{
|
|
var startPosition = this.baseDrawer.GetPointOnArc(positions[0], positions[1], this.progress);
|
|
var vectorOffset = positions[0].subtract(positions[1]).normalizeCopy(progressSize);
|
|
var finishPosition = startPosition.add(vectorOffset);
|
|
|
|
this.context.beginPath();
|
|
this.context.moveTo(startPosition.x, startPosition.y);
|
|
this.context.lineTo(finishPosition.x, finishPosition.y);
|
|
this.context.stroke();
|
|
}
|
|
}
|
|
|
|
|
|
function CurvedArcDrawer(context, model)
|
|
{
|
|
this.context = context;
|
|
this.model = model;
|
|
}
|
|
|
|
CurvedArcDrawer.prototype = Object.create(BaseEdgeDrawer.prototype);
|
|
|
|
CurvedArcDrawer.prototype.DrawArc = function(position1, position2, arcStyle)
|
|
{
|
|
this.context.setLineDash(lineDashTypes[arcStyle.lineDash]);
|
|
if (position1.equals(position2))
|
|
{
|
|
this.context.beginPath();
|
|
this.context.arc(position1.x - Math.cos(this.model.GetLoopShiftAngel()) * this.model.GetLoopSize(),
|
|
position1.y - Math.sin(this.model.GetLoopShiftAngel()) * this.model.GetLoopSize(), this.model.GetLoopSize(), 0, 2 * Math.PI);
|
|
this.context.closePath();
|
|
this.context.stroke();
|
|
}
|
|
else
|
|
{
|
|
var points = this.model.GetBezierPoints(position1, position2);
|
|
var firstBezierPoint = points[0];
|
|
var secondBezierPoint = points[1];
|
|
|
|
this.context.beginPath();
|
|
this.context.moveTo(position1.x, position1.y);
|
|
this.context.bezierCurveTo(firstBezierPoint.x, firstBezierPoint.y, secondBezierPoint.x, secondBezierPoint.y, position2.x, position2.y);
|
|
this.context.stroke();
|
|
}
|
|
this.context.setLineDash([]);
|
|
}
|
|
|
|
CurvedArcDrawer.prototype.GetStartArrowDirection = function(position1, position2, lengthArrow)
|
|
{
|
|
var dist = position1.distance(position2);
|
|
var direction = position1.subtract(this.model.GetCurvePoint(position1, position2, lengthArrow / dist));
|
|
direction.normalize(1.0);
|
|
return direction;
|
|
}
|
|
|
|
CurvedArcDrawer.prototype.GetFinishArrowDirection = function(position1, position2, lengthArrow)
|
|
{
|
|
var dist = position1.distance(position2);
|
|
var direction = position2.subtract(this.model.GetCurvePoint(position1, position2, 1.0 - lengthArrow / dist));
|
|
direction.normalize(1.0);
|
|
return direction;
|
|
}
|
|
|
|
CurvedArcDrawer.prototype.GetTextCenterPoint = function (position1, position2, hasPair, arcStyle)
|
|
{
|
|
var centerPoint = this.model.GetCurvePoint(position1, position2, 0.5)
|
|
if (position1.equals(position2))
|
|
{
|
|
let sinVal = Math.sin(this.model.GetLoopShiftAngel());
|
|
let cosVal = Math.cos(this.model.GetLoopShiftAngel());
|
|
centerPoint.x = centerPoint.x - cosVal * this.model.GetLoopSize();
|
|
centerPoint.y = centerPoint.y - (sinVal + Math.sign(sinVal) * 1.0) * this.model.GetLoopSize();
|
|
}
|
|
|
|
return centerPoint;
|
|
}
|
|
|
|
CurvedArcDrawer.prototype.GetPointOnArc = function (position1, position2, percent)
|
|
{
|
|
return this.model.GetCurvePoint(position1, position2, percent);
|
|
}
|