diff --git a/script/Appilcation.js b/script/Appilcation.js
index 6bacbc2..4b9c18c 100644
--- a/script/Appilcation.js
+++ b/script/Appilcation.js
@@ -220,7 +220,7 @@ Application.prototype._PrintRedrawGraph = function()
context.translate(bbox.minPoint.inverse().x, bbox.minPoint.inverse().y);
- this._RedrawGraph(context, bbox.minPoint.inverse(), this.backgroundCommonStyle, false,
+ this._RedrawGraph(context, bbox.minPoint.inverse(), this.backgroundPrintStyle, false,
this.vertexPrintCommonStyle, this.vertexPrintSelectedVertexStyles,
this.edgePrintCommonStyle, this.edgePrintSelectedStyles);
@@ -361,7 +361,7 @@ Application.prototype._RedrawEdge = function(edge, arcDrawer, commonStyle, selec
Application.prototype._RedrawEdgeWithStyle = function(edge, style, arcDrawer, commonStyle, selectedStyles)
{
- arcDrawer.Draw(edge, style.GetStyle({}));
+ arcDrawer.Draw(edge, style.GetStyle({}, edge));
}
Application.prototype.RedrawEdgeProgress = function(context, edge, progress)
@@ -394,7 +394,7 @@ Application.prototype.RedrawNodes = function(context)
for (i = 0; i < this.graph.vertices.length; i ++)
{
- graphDrawer.Draw(this.graph.vertices[i], this.graph.vertices[i].currentStyle.GetStyle({}));
+ graphDrawer.Draw(this.graph.vertices[i], this.graph.vertices[i].currentStyle.GetStyle({}, this.graph.vertices[i]));
}
}
@@ -1615,20 +1615,20 @@ Application.prototype.GetSelectionRect = function(rect)
return this.selectionRect;
}
-Application.prototype.GetStyle = function(type, styleName, index)
+Application.prototype.GetStyle = function(type, styleName, object, index)
{
if (type == "vertex")
{
if (styleName == "common")
{
- return this.vertexCommonStyle;
+ return object !== undefined ? object.getStyleFor(0) : this.vertexCommonStyle;
}
else if (styleName == "selected")
{
if (index == undefined)
index = 0;
- return this.vertexSelectedVertexStyles[index];
+ return object !== undefined && index == 0 ? object.getStyleFor(1) : this.vertexSelectedVertexStyles[index];
}
else if (styleName == "printed")
{
@@ -1648,11 +1648,11 @@ Application.prototype.GetStyle = function(type, styleName, index)
{
if (styleName == "common")
{
- return this.edgeCommonStyle;
+ return object !== undefined ? object.getStyleFor(0) : this.edgeCommonStyle;
}
else if (styleName == "selected")
{
- return this.edgeSelectedStyles[0];
+ return object !== undefined && index == 0 ? object.getStyleFor(1) : this.edgeSelectedStyles[0];
}
else if (styleName == "printed")
{
diff --git a/script/BaseBackgroundDrawer.js b/script/BaseBackgroundDrawer.js
index 8177b8b..68decd4 100644
--- a/script/BaseBackgroundDrawer.js
+++ b/script/BaseBackgroundDrawer.js
@@ -9,8 +9,17 @@ function CommonBackgroundStyle()
this.commonOpacity = 1.0;
}
+CommonBackgroundStyle.prototype.ShouldLoad = function (field)
+{
+ return true;
+}
+
+PrintBackgroundStyle.prototype = Object.create(CommonBackgroundStyle.prototype);
+
function PrintBackgroundStyle()
{
+ CommonBackgroundStyle.apply(this, arguments);
+
this.commonColor = '#ffffff';
this.commonOpacity = 1.0;
}
diff --git a/script/BaseEdge.js b/script/BaseEdge.js
index 348f8c8..1c0c6d2 100755
--- a/script/BaseEdge.js
+++ b/script/BaseEdge.js
@@ -111,7 +111,7 @@ BaseEdge.prototype.LoadFromXML = function (xml, graph)
for(var indexField in parsedSave)
{
var index = parseInt(indexField);
- this.ownStyles[index] = this.getStyleFor(index);
+ this.ownStyles[index] = FullObjectCopy(this.getStyleFor(index));
for(var field in parsedSave[indexField])
{
if (this.ownStyles[index].ShouldLoad(field))
@@ -184,8 +184,8 @@ BaseEdge.prototype.GetEdgePositions = function()
var position1 = this.vertex1.position;
var position2 = this.vertex2.position;
- var diameter1 = this.vertex1.model.diameter + parseInt(this.vertex1.currentStyle.GetStyle({}).lineWidth);
- var diameter2 = this.vertex2.model.diameter + parseInt(this.vertex2.currentStyle.GetStyle({}).lineWidth);
+ var diameter1 = this.vertex1.model.diameter + parseInt(this.vertex1.currentStyle.GetStyle({}, this.vertex1).lineWidth);
+ var diameter2 = this.vertex2.model.diameter + parseInt(this.vertex2.currentStyle.GetStyle({}, this.vertex2).lineWidth);
var direction = position1.subtract(position2);
@@ -219,18 +219,18 @@ BaseEdge.prototype.GetEdgePositions = function()
vertexes.forEach(function(data)
{
- var shape = data.vertex.currentStyle.GetStyle({}).shape;
+ var shape = data.vertex.currentStyle.GetStyle({}, data.vertex).shape;
if (shape == VertexCircleShape)
{
var direction = data.direction.multiply(0.5);
res.push(data.position.subtract(direction.multiply(data.diameter)));
}
- else if (shape == VertexSquareShape || shape == VertexTriangleShape)
+ else
{
var lineFinish1 = data.direction.multiply(-1).multiply(1000.0);
- var pointsVertex1 = shape == VertexSquareShape ? GetSquarePoints(data.diameter) : GetTrianglePoints(data.diameter);
+ var pointsVertex1 = GetPointsForShape(shape, data.diameter);
pointsVertex1.push(pointsVertex1[0]);
for (var i = 0; i < pointsVertex1.length - 1; i ++)
@@ -284,7 +284,7 @@ BaseEdge.prototype.getStyleFor = function (index)
{
if (this.ownStyles.hasOwnProperty(index))
{
- return FullObjectCopy(this.ownStyles[index]);
+ return this.ownStyles[index];
}
else
{
@@ -295,7 +295,7 @@ BaseEdge.prototype.getStyleFor = function (index)
else
style = globalApplication.GetStyle("edge", "selected");
- return FullObjectCopy(style);
+ return style;
}
}
diff --git a/script/BaseEdgeDrawer.js b/script/BaseEdgeDrawer.js
index 2fc87f9..f2d56b9 100644
--- a/script/BaseEdgeDrawer.js
+++ b/script/BaseEdgeDrawer.js
@@ -1,17 +1,25 @@
/**
* Graph drawer.
*/
-
+
+
+ const lineDashTypes = [
+ [],
+ [4, 4],
+ [12, 12],
+ [16, 4, 4, 4],
+ ];
+
function BaseEdgeStyle()
{
this.baseStyles = [];
}
- BaseEdgeStyle.prototype.GetStyle = function (baseStyle)
+ BaseEdgeStyle.prototype.GetStyle = function (baseStyle, object)
{
this.baseStyles.forEach(function(element) {
- var styleObject = globalApplication.GetStyle("edge", element);
- baseStyle = styleObject.GetStyle(baseStyle);
+ var styleObject = globalApplication.GetStyle("edge", element, object);
+ baseStyle = styleObject.GetStyle(baseStyle, object);
});
if (this.hasOwnProperty('weightText'))
@@ -22,8 +30,12 @@
baseStyle.fillStyle = this.fillStyle;
if (this.hasOwnProperty('textPadding'))
baseStyle.textPadding = this.textPadding;
- if (this.hasOwnProperty('textStrockeWidth'))
+ if (this.hasOwnProperty('textStrockeWidth'))
baseStyle.textStrockeWidth = this.textStrockeWidth;
+ if (this.hasOwnProperty('lineDash'))
+ baseStyle.lineDash = this.lineDash;
+ if (this.hasOwnProperty('widthFactor'))
+ baseStyle.widthFactor = this.widthFactor;
return baseStyle;
}
@@ -42,6 +54,8 @@ function CommonEdgeStyle()
this.fillStyle = '#68aeba';
this.textPadding = 4;
this.textStrockeWidth = 2;
+ this.lineDash = lineDashTypes[0];
+ this.widthFactor = 1;
}
CommonEdgeStyle.prototype = Object.create(BaseEdgeStyle.prototype);
@@ -55,6 +69,8 @@ function CommonPrintEdgeStyle()
this.fillStyle = '#FFFFFF';
this.textPadding = 4;
this.textStrockeWidth = 2;
+
+ this.baseStyles.push("common");
}
CommonPrintEdgeStyle.prototype = Object.create(BaseEdgeStyle.prototype);
@@ -180,8 +196,8 @@ BaseEdgeDrawer.prototype.Draw = function(baseEdge, arcStyle)
this.SetupStyle(baseEdge, arcStyle);
- var lengthArrow = baseEdge.model.width * 4;
- var widthArrow = baseEdge.model.width * 2;
+ var lengthArrow = baseEdge.model.width * 4 * (Math.min(this.style.widthFactor * 1.5, 1));
+ var widthArrow = baseEdge.model.width * 2 * (Math.min(this.style.widthFactor * 1.5, 1));
var position1 = baseEdge.vertex1.position;
var position2 = baseEdge.vertex2.position;
var direction = position1.subtract(position2);
@@ -236,10 +252,11 @@ BaseEdgeDrawer.prototype.Draw = function(baseEdge, arcStyle)
BaseEdgeDrawer.prototype.SetupStyle = function(baseEdge, arcStyle)
{
- this.context.lineWidth = baseEdge.model.width;
+ this.context.lineWidth = baseEdge.model.width * arcStyle.widthFactor;
this.context.strokeStyle = arcStyle.strokeStyle;
this.context.fillStyle = arcStyle.fillStyle;
this.model = baseEdge.model;
+ this.style = arcStyle;
}
BaseEdgeDrawer.prototype.DrawArc = function(position1, position2, arcStyle)
@@ -249,13 +266,13 @@ BaseEdgeDrawer.prototype.DrawArc = function(position1, position2, arcStyle)
this.drawArc.DrawArc(position1, position2, arcStyle);
return;
}
-
+
+ this.context.setLineDash(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
@@ -263,9 +280,9 @@ BaseEdgeDrawer.prototype.DrawArc = function(position1, position2, arcStyle)
this.context.beginPath();
this.context.moveTo(position1.x, position1.y);
this.context.lineTo(position2.x, position2.y);
- this.context.closePath();
- this.context.stroke();
+ this.context.stroke();
}
+ this.context.setLineDash([]);
}
BaseEdgeDrawer.prototype.DrawWeight = function(position1, position2, text, arcStyle, hasPair)
@@ -417,7 +434,6 @@ ProgressArcDrawer.prototype.Draw = function(baseEdge, arcStyle)
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.closePath();
this.context.stroke();
}
else
@@ -429,7 +445,6 @@ ProgressArcDrawer.prototype.Draw = function(baseEdge, arcStyle)
this.context.beginPath();
this.context.moveTo(startPosition.x, startPosition.y);
this.context.lineTo(finishPosition.x, finishPosition.y);
- this.context.closePath();
this.context.stroke();
}
}
@@ -445,6 +460,7 @@ CurvedArcDrawer.prototype = Object.create(BaseEdgeDrawer.prototype);
CurvedArcDrawer.prototype.DrawArc = function(position1, position2, arcStyle)
{
+ this.context.setLineDash(arcStyle.lineDash);
if (position1.equals(position2))
{
this.context.beginPath();
@@ -464,6 +480,7 @@ CurvedArcDrawer.prototype.DrawArc = function(position1, position2, arcStyle)
this.context.bezierCurveTo(firstBezierPoint.x, firstBezierPoint.y, secondBezierPoint.x, secondBezierPoint.y, position2.x, position2.y);
this.context.stroke();
}
+ this.context.setLineDash([]);
}
CurvedArcDrawer.prototype.GetStartArrowDiretion = function(position1, position2, lengthArrow)
diff --git a/script/BaseVertex.js b/script/BaseVertex.js
index 1f7b6a5..1198f3c 100755
--- a/script/BaseVertex.js
+++ b/script/BaseVertex.js
@@ -70,7 +70,7 @@ BaseVertex.prototype.LoadFromXML = function (xml)
for(var indexField in parsedSave)
{
var index = parseInt(indexField);
- this.ownStyles[index] = this.getStyleFor(index);
+ this.ownStyles[index] = FullObjectCopy(this.getStyleFor(index));
for(var field in parsedSave[indexField])
{
if (this.ownStyles[index].ShouldLoad(field))
@@ -99,20 +99,20 @@ BaseVertex.prototype.IsUndefinedPosition = function ()
BaseVertex.prototype.HitTest = function (pos)
{
- var shape = this.hasOwnProperty('currentStyle') ? this.currentStyle.GetStyle({}).shape : VertexCircleShape;
- var width = this.hasOwnProperty('currentStyle') ? this.currentStyle.GetStyle({}).lineWidth : 0;
+ var shape = this.hasOwnProperty('currentStyle') ? this.currentStyle.GetStyle({}, this).shape : VertexCircleShape;
+ var width = this.hasOwnProperty('currentStyle') ? this.currentStyle.GetStyle({}, this).lineWidth : 0;
if (shape == VertexCircleShape)
{
return this.position.distance(pos) < this.model.diameter / 2.0 + width;
}
- else if (shape == VertexSquareShape || shape == VertexTriangleShape)
+ else
{
var relativPos = (new Point(pos.x, pos.y)).subtract(this.position);
var lineFinish1 = relativPos.add(new Point(1000, 0));
var lineFinish2 = relativPos.add(new Point(-1000, 0));
- var pointsVertex1 = shape == VertexSquareShape ? GetSquarePoints(this.model.diameter + width) : GetTrianglePoints(this.model.diameter + width);
+ var pointsVertex1 = GetPointsForShape(shape, this.model.diameter + width);
pointsVertex1.push(pointsVertex1[0]);
var hitNumber1 = 0;
@@ -148,14 +148,14 @@ BaseVertex.prototype.resetOwnStyle = function (index)
BaseVertex.prototype.setOwnStyle = function (index, style)
{
- this.ownStyles[index] = style;
+ this.ownStyles[index] = FullObjectCopy(style);
}
BaseVertex.prototype.getStyleFor = function (index)
{
if (this.ownStyles.hasOwnProperty(index))
{
- return FullObjectCopy(this.ownStyles[index]);
+ return this.ownStyles[index];
}
else
{
@@ -166,7 +166,7 @@ BaseVertex.prototype.getStyleFor = function (index)
else
style = globalApplication.GetStyle("vertex", "selected");
- return FullObjectCopy(style);
+ return style;
}
}
diff --git a/script/BaseVertexDrawer.js b/script/BaseVertexDrawer.js
index bb0c11a..afcc53c 100644
--- a/script/BaseVertexDrawer.js
+++ b/script/BaseVertexDrawer.js
@@ -6,9 +6,11 @@
// Vertex shape
-const VertexCircleShape = 0,
- VertexSquareShape = 1,
- VertexTriangleShape = 2;
+const VertexCircleShape = 0,
+ VertexSquareShape = 1,
+ VertexTriangleShape = 2,
+ VertexPentagonShape = 3,
+ VertexHomeShape = 4;
function GetSquarePoints(diameter)
{
@@ -38,17 +40,45 @@ function GetTrianglePoints(diameter)
return res;
}
+
+function GetPentagonPoints(diameter)
+{
+ var res = [];
+
+ var baseValue = diameter / 2 * 1.2;
+
+ res.push(new Point(0, - baseValue));
+ res.push((new Point(0, - baseValue)).rotate(new Point(0, 0), 72));
+ res.push((new Point(0, - baseValue)).rotate(new Point(0, 0), 72 * 2));
+ res.push((new Point(0, - baseValue)).rotate(new Point(0, 0), 72 * 3));
+ res.push((new Point(0, - baseValue)).rotate(new Point(0, 0), 72 * 4));
+ res.push((new Point(0, - baseValue)).rotate(new Point(0, 0), 72 * 5));
+
+ return res;
+}
+
+function GetPointsForShape(shape, diameter)
+{
+ var pointsVertex1 = null;
+ switch (parseInt(shape))
+ {
+ case VertexSquareShape: pointsVertex1 = GetSquarePoints(diameter); break;
+ case VertexTriangleShape: pointsVertex1 = GetTrianglePoints(diameter); break;
+ case VertexPentagonShape: pointsVertex1 = GetPentagonPoints(diameter); break;
+ }
+ return pointsVertex1;
+}
function BaseVertexStyle()
{
this.baseStyles = [];
}
-BaseVertexStyle.prototype.GetStyle = function (baseStyle)
+BaseVertexStyle.prototype.GetStyle = function (baseStyle, object)
{
this.baseStyles.forEach(function(element) {
- var styleObject = globalApplication.GetStyle("vertex", element);
- baseStyle = styleObject.GetStyle(baseStyle);
+ var styleObject = globalApplication.GetStyle("vertex", element, object);
+ baseStyle = styleObject.GetStyle(baseStyle, object);
});
if (this.hasOwnProperty('lineWidth'))
@@ -291,24 +321,12 @@ BaseVertexDrawer.prototype.DrawShape = function(baseGraph)
{
this.context.arc(baseGraph.position.x, baseGraph.position.y, baseGraph.model.diameter / 2.0, 0, 2 * Math.PI);
}
- else if (this.currentStyle.shape == VertexSquareShape)
+ else
{
- var points = GetSquarePoints(baseGraph.model.diameter);
+ var points = GetPointsForShape(this.currentStyle.shape, baseGraph.model.diameter);
this.context.moveTo(baseGraph.position.x + points[points.length - 1].x, baseGraph.position.y + points[points.length - 1].y);
- var context = this.context;
-
- points.forEach(function(point) {
- context.lineTo(baseGraph.position.x + point.x, baseGraph.position.y + point.y);
- });
- }
- else if (this.currentStyle.shape == VertexTriangleShape)
- {
- var points = GetTrianglePoints(baseGraph.model.diameter)
-
- this.context.moveTo(baseGraph.position.x + points[points.length - 1].x, baseGraph.position.y + points[points.length - 1].y);
-
var context = this.context;
points.forEach(function(point) {
diff --git a/script/EventHandlers.js b/script/EventHandlers.js
index f99ee13..820efcc 100644
--- a/script/EventHandlers.js
+++ b/script/EventHandlers.js
@@ -1402,17 +1402,18 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
var fillFields = function()
{
- var fullStyle = style.GetStyle({});
+ var fullStyle = style.GetStyle({}, forAll ? undefined : selectedVertexes[0]);
$( "#vertexFillColor" ).val(fullStyle.fillStyle);
$( "#vertexStrokeColor" ).val(fullStyle.strokeStyle);
$( "#vertexTextColor" ).val(fullStyle.mainTextColor);
$( "#vertexStrokeSize" ).val(fullStyle.lineWidth);
+ $( "#vertexShape" ).val(fullStyle.shape);
}
var redrawVertex = function()
{
- var fullStyle = style.GetStyle({});
+ var fullStyle = style.GetStyle({}, forAll ? undefined : selectedVertexes[0]);
if (fullStyle.fillStyle != $( "#vertexFillColor" ).val())
style.fillStyle = $( "#vertexFillColor" ).val();
@@ -1425,6 +1426,9 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
if (fullStyle.lineWidth != $( "#vertexStrokeSize" ).val())
style.lineWidth = parseInt($( "#vertexStrokeSize" ).val());
+
+ if (fullStyle.shape != $( "#vertexShape" ).val())
+ style.shape = parseInt($( "#vertexShape" ).val());
var canvas = document.getElementById( "VertexPreview" );
var context = canvas.getContext('2d');
@@ -1438,8 +1442,10 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
var baseVertex = new BaseVertex(canvas.width / 2, canvas.height / 2, new BaseEnumVertices(this));
baseVertex.mainText = "1";
baseVertex.upText = "Up Text";
+ if (!forAll)
+ baseVertex.ownStyles = selectedVertexes[0].ownStyles;
- graphDrawer.Draw(baseVertex, style.GetStyle({}));
+ graphDrawer.Draw(baseVertex, style.GetStyle({}, baseVertex));
context.restore();
}
@@ -1507,6 +1513,7 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
$( "#vertexStrokeColor" ).change(redrawVertex);
$( "#vertexTextColor" ).change(redrawVertex);
$( "#vertexStrokeSize" ).change(redrawVertex);
+ $( "#vertexShape" ).change(redrawVertex);
}
/**
@@ -1542,16 +1549,16 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
var fillFields = function()
{
- var fullStyle = style.GetStyle({});
+ var fullStyle = style.GetStyle({}, forAll ? undefined : selectedEdges[0]);
$( "#edgeFillColor" ).val(fullStyle.fillStyle);
$( "#edgeStrokeColor" ).val(fullStyle.strokeStyle);
- $( "#edgeTextColor" ).val(fullStyle.weightText);
+ $( "#edgeTextColor" ).val(fullStyle.weightText);
}
var redrawVertex = function()
{
- var fullStyle = style.GetStyle({});
+ var fullStyle = style.GetStyle({}, forAll ? undefined : selectedEdges[0]);
if (fullStyle.fillStyle != $( "#edgeFillColor" ).val())
style.fillStyle = $( "#edgeFillColor" ).val();
@@ -1579,7 +1586,10 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
var baseEdge = new BaseEdge(baseVertex1, baseVertex2, true, 10, "Text");
- graphDrawer.Draw(baseEdge, style.GetStyle({}));
+ if (!forAll)
+ baseEdge.ownStyles = selectedEdges[0].ownStyles;
+
+ graphDrawer.Draw(baseEdge, style.GetStyle({}, baseEdge));
context.restore();
}
diff --git a/script/point.js b/script/point.js
index 693dd31..6da3a99 100755
--- a/script/point.js
+++ b/script/point.js
@@ -58,6 +58,7 @@ Point.prototype.rotate = function(center, degrees){
this.y = offset.x * Math.sin(radians) + offset.y * Math.cos(radians);
this.x = this.x + center.x;
this.y = this.y + center.y;
+ return this;
};
Point.prototype.offset = function(dx, dy){
diff --git a/script/utils.js b/script/utils.js
index bdb922c..903a74b 100644
--- a/script/utils.js
+++ b/script/utils.js
@@ -25,7 +25,9 @@ function gDecodeFromHTML(str)
function FullObjectCopy(obj)
{
- return Object.assign(Object.create(obj), obj);
+ var newObj = Object.create(Object.getPrototypeOf(obj));
+
+ return Object.assign(newObj, obj);
}
function FullArrayCopy(arr)
diff --git a/tpl/home.php b/tpl/home.php
index 985c3fc..b041ca4 100755
--- a/tpl/home.php
+++ b/tpl/home.php
@@ -411,7 +411,7 @@
@@ -420,6 +420,17 @@
+