Fix remove self edge

This commit is contained in:
Unick Soft 2020-07-09 19:58:41 +02:00
parent 8e2fe8066f
commit 17a276f797
4 changed files with 50 additions and 16 deletions

View File

@ -101,7 +101,7 @@ BaseEdge.prototype.GetPixelLength = function ()
{ {
if (this.vertex1 == this.vertex2) if (this.vertex1 == this.vertex2)
{ {
return (new CommonEdgeStyle()).sizeOfLoop * 2 * Math.PI; return this.model.GetLoopSize() * 2 * Math.PI;
} }
else else
{ {

View File

@ -10,8 +10,6 @@ function CommonEdgeStyle()
this.fillStyle = '#68aeba'; this.fillStyle = '#68aeba';
this.textPadding = 4; this.textPadding = 4;
this.textStrockeWidth = 2; this.textStrockeWidth = 2;
this.sizeOfLoop = 24;
this.loopShiftAngel = Math.PI / 6;
} }
function CommonPrintEdgeStyle() function CommonPrintEdgeStyle()
@ -178,7 +176,7 @@ BaseEdgeDrawer.prototype.SetupStyle = function(baseEdge, arcStyle)
this.context.lineWidth = baseEdge.model.width; this.context.lineWidth = baseEdge.model.width;
this.context.strokeStyle = arcStyle.strokeStyle; this.context.strokeStyle = arcStyle.strokeStyle;
this.context.fillStyle = arcStyle.fillStyle; this.context.fillStyle = arcStyle.fillStyle;
this.sizeOfLoop = baseEdge.vertex1.model.diameter / 2; this.model = baseEdge.model;
} }
BaseEdgeDrawer.prototype.DrawArc = function(position1, position2, arcStyle) BaseEdgeDrawer.prototype.DrawArc = function(position1, position2, arcStyle)
@ -192,8 +190,8 @@ BaseEdgeDrawer.prototype.DrawArc = function(position1, position2, arcStyle)
if (position1.equals(position2)) if (position1.equals(position2))
{ {
this.context.beginPath(); this.context.beginPath();
this.context.arc(position1.x - Math.cos(arcStyle.loopShiftAngel) * arcStyle.sizeOfLoop, this.context.arc(position1.x - Math.cos(this.model.GetLoopShiftAngel()) * this.model.GetLoopSize(),
position1.y - Math.sin(arcStyle.loopShiftAngel) * arcStyle.sizeOfLoop, arcStyle.sizeOfLoop, 0, 2 * Math.PI); position1.y - Math.sin(this.model.GetLoopShiftAngel()) * this.model.GetLoopSize(), this.model.GetLoopSize(), 0, 2 * Math.PI);
this.context.closePath(); this.context.closePath();
this.context.stroke(); this.context.stroke();
} }
@ -313,8 +311,8 @@ BaseEdgeDrawer.prototype.GetTextCenterPoint = function (position1, position2, ha
var centerPoint = Point.interpolate(position1, position2, 0.5); var centerPoint = Point.interpolate(position1, position2, 0.5);
if (position1.equals(position2)) if (position1.equals(position2))
{ {
centerPoint.y = centerPoint.y - Math.cos(arcStyle.loopShiftAngel) * arcStyle.sizeOfLoop * 2; centerPoint.y = centerPoint.y - Math.cos(this.model.GetLoopShiftAngel()) * this.model.GetLoopSize() * 2;
centerPoint.x = centerPoint.x - Math.sin(arcStyle.loopShiftAngel) * arcStyle.sizeOfLoop * 2; centerPoint.x = centerPoint.x - Math.sin(this.model.GetLoopShiftAngel()) * this.model.GetLoopSize() * 2;
} }
return centerPoint; return centerPoint;
@ -351,11 +349,11 @@ ProgressArcDrawer.prototype.Draw = function(baseEdge, arcStyle)
if (positions[0].equals(positions[1])) if (positions[0].equals(positions[1]))
{ {
var sizeInRadian = progressSize / (2 * Math.PI * arcStyle.sizeOfLoop) * 6; var sizeInRadian = progressSize / (2 * Math.PI * this.baseDrawer.model.GetLoopSize()) * 6;
this.context.beginPath(); this.context.beginPath();
this.context.arc(positions[0].x - Math.cos(arcStyle.loopShiftAngel) * arcStyle.sizeOfLoop, this.context.arc(positions[0].x - Math.cos(this.baseDrawer.model.GetLoopShiftAngel()) * this.baseDrawer.model.GetLoopSize(),
positions[0].y - Math.sin(arcStyle.loopShiftAngel) * arcStyle.sizeOfLoop, arcStyle.sizeOfLoop, this.progress * 2 * Math.PI, this.progress * 2 * Math.PI + sizeInRadian); 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.closePath(); this.context.closePath();
this.context.stroke(); this.context.stroke();
} }
@ -387,8 +385,8 @@ CurvedArcDrawer.prototype.DrawArc = function(position1, position2, arcStyle)
if (position1.equals(position2)) if (position1.equals(position2))
{ {
this.context.beginPath(); this.context.beginPath();
this.context.arc(position1.x - Math.cos(arcStyle.loopShiftAngel) * arcStyle.sizeOfLoop, this.context.arc(position1.x - Math.cos(this.model.GetLoopShiftAngel()) * this.model.GetLoopSize(),
position1.y - Math.sin(arcStyle.loopShiftAngel) * arcStyle.sizeOfLoop, arcStyle.sizeOfLoop, 0, 2 * Math.PI); position1.y - Math.sin(this.model.GetLoopShiftAngel()) * this.model.GetLoopSize(), this.model.GetLoopSize(), 0, 2 * Math.PI);
this.context.closePath(); this.context.closePath();
this.context.stroke(); this.context.stroke();
} }
@ -426,8 +424,8 @@ CurvedArcDrawer.prototype.GetTextCenterPoint = function (position1, position2, h
var centerPoint = this.model.GetCurvedPoint(position1, position2, 0.5) var centerPoint = this.model.GetCurvedPoint(position1, position2, 0.5)
if (position1.equals(position2)) if (position1.equals(position2))
{ {
centerPoint.y = centerPoint.y - Math.cos(arcStyle.loopShiftAngel) * arcStyle.sizeOfLoop * 2; centerPoint.y = centerPoint.y - Math.cos(this.model.GetLoopShiftAngel()) * this.model.GetLoopSize() * 2;
centerPoint.x = centerPoint.x - Math.sin(arcStyle.loopShiftAngel) * arcStyle.sizeOfLoop * 2; centerPoint.x = centerPoint.x - Math.sin(this.model.GetLoopShiftAngel()) * this.model.GetLoopSize() * 2;
} }
return centerPoint; return centerPoint;

View File

@ -11,6 +11,8 @@ function EdgeModel()
this.type = EdgeModels.line; this.type = EdgeModels.line;
this.curvedValue = EdgeModel.prototype.defaultCruved; this.curvedValue = EdgeModel.prototype.defaultCruved;
this.default = true; this.default = true;
this.sizeOfLoop = 24;
this.loopShiftAngel = Math.PI / 6;
} }
EdgeModel.prototype.defaultCruved = 0.1; EdgeModel.prototype.defaultCruved = 0.1;
@ -101,10 +103,20 @@ EdgeModel.prototype.HitTestLine = function(position1, position2, mousePos, facto
factor = 1.0; factor = 1.0;
} }
var pos1 = position1; var pos1 = position1;
var pos2 = position2; var pos2 = position2;
var pos0 = mousePos; var pos0 = mousePos;
// Self loop case
if (pos1.equals(pos2))
{
var xCenter = pos1.x - Math.cos(this.GetLoopShiftAngel()) * this.GetLoopSize();
var yCenter = pos1.y - Math.sin(this.GetLoopShiftAngel()) * this.GetLoopSize();
return Math.abs((Point.distance(new Point(xCenter, yCenter), pos0)) - this.GetLoopSize()) <= this.width * 1.5 * factor;
}
var r1 = pos0.distance(pos1); var r1 = pos0.distance(pos1);
var r2 = pos0.distance(pos2); var r2 = pos0.distance(pos2);
var r12 = pos1.distance(pos2); var r12 = pos1.distance(pos2);
@ -127,6 +139,19 @@ EdgeModel.prototype.HitTestLine = function(position1, position2, mousePos, facto
EdgeModel.prototype.HitTestCurved = function(position1, position2, mousePos) EdgeModel.prototype.HitTestCurved = function(position1, position2, mousePos)
{ {
var pos1 = position1;
var pos2 = position2;
var pos0 = mousePos;
// Self loop case
if (pos1.equals(pos2))
{
var xCenter = pos1.x - Math.cos(this.GetLoopShiftAngel()) * this.GetLoopSize();
var yCenter = pos1.y - Math.sin(this.GetLoopShiftAngel()) * this.GetLoopSize();
return Math.abs((Point.distance(new Point(xCenter, yCenter), pos0)) - this.GetLoopSize()) <= this.width * 1.5;
}
var interval_count = position1.distance(position2) / 100 * 30; var interval_count = position1.distance(position2) / 100 * 30;
var start = position1; var start = position1;
@ -174,3 +199,14 @@ EdgeModel.prototype.SetCurvedValue = function (value)
this.default = false; this.default = false;
} }
EdgeModel.prototype.GetLoopSize = function ()
{
return this.sizeOfLoop;
}
EdgeModel.prototype.GetLoopShiftAngel = function ()
{
return this.loopShiftAngel;
}

View File

@ -10,7 +10,7 @@
<script src="<?= Root('i/js/dev/jquery-ui.js')?>"></script> <script src="<?= Root('i/js/dev/jquery-ui.js')?>"></script>
<script src="<?= Root('i/js/dev/jquery.feedback_me.js')?>"></script> <script src="<?= Root('i/js/dev/jquery.feedback_me.js')?>"></script>
<script src="<?= Root("script/example.js?v=28")?>" ></script> <script src="<?= Root("script/example.js?v=29")?>" ></script>
</head> </head>
<!-- <!--
<div class="pull-right"> <div class="pull-right">