/** * Graph drawer. */ // Test graph: http://localhost:8080/?graph=oimDPgsdgiAjWGBHZZcst function BaseVertexStyle() { this.baseStyles = []; } BaseVertexStyle.prototype.GetStyle = function (baseStyle) { this.baseStyles.forEach(function(element) { var styleObject = globalApplication.GetStyle("vertex", element); baseStyle = styleObject.GetStyle(baseStyle); }); if (this.hasOwnProperty('lineWidth')) baseStyle.lineWidth = this.lineWidth; if (this.hasOwnProperty('strokeStyle')) baseStyle.strokeStyle = this.strokeStyle; if (this.hasOwnProperty('fillStyle')) baseStyle.fillStyle = this.fillStyle; if (this.hasOwnProperty('mainTextColor')) baseStyle.mainTextColor = this.mainTextColor; return baseStyle; } BaseVertexStyle.prototype.ShouldLoad = function (field) { return field != "baseStyles"; } // Common style of Graphs. function CommonVertexStyle() { BaseVertexStyle.apply(this, arguments); this.lineWidth = 20; this.strokeStyle = '#c7b7c7'; this.fillStyle = '#68aeba'; this.mainTextColor = '#f0d543'; this.baseStyles = []; } CommonVertexStyle.prototype = Object.create(BaseVertexStyle.prototype); function CommonPrintVertexStyle() { BaseVertexStyle.apply(this, arguments); this.strokeStyle = '#000000'; this.fillStyle = '#FFFFFF'; this.mainTextColor = '#000000'; this.baseStyles.push("common"); } CommonPrintVertexStyle.prototype = Object.create(BaseVertexStyle.prototype); // Selected style of Graphs. function SelectedVertexStyle0() { BaseVertexStyle.apply(this, arguments); this.strokeStyle = '#f0d543'; this.mainTextColor = '#f0d543'; this.fillStyle = '#c7627a'; this.baseStyles.push("common"); } SelectedVertexStyle0.prototype = Object.create(BaseVertexStyle.prototype); function SelectedVertexStyle1() { BaseVertexStyle.apply(this, arguments); this.strokeStyle = '#7a9ba0'; this.mainTextColor = '#c3d2d5'; this.fillStyle = '#534641'; this.baseStyles.push("selected"); } SelectedVertexStyle1.prototype = Object.create(BaseVertexStyle.prototype); function SelectedVertexStyle2() { BaseVertexStyle.apply(this, arguments); this.strokeStyle = '#8C4C86'; this.mainTextColor = '#dbbdd8'; this.fillStyle = '#253267'; this.baseStyles.push("selected"); } SelectedVertexStyle2.prototype = Object.create(BaseVertexStyle.prototype); function SelectedVertexStyle3() { BaseVertexStyle.apply(this, arguments); this.strokeStyle = '#6188FF'; this.mainTextColor = '#6188FF'; this.fillStyle = '#E97CF9'; this.baseStyles.push("selected"); } SelectedVertexStyle3.prototype = Object.create(BaseVertexStyle.prototype); function SelectedVertexStyle4() { BaseVertexStyle.apply(this, arguments); this.strokeStyle = '#C6B484'; this.mainTextColor = '#C6B484'; this.fillStyle = '#E0DEE1'; this.baseStyles.push("selected"); } SelectedVertexStyle4.prototype = Object.create(BaseVertexStyle.prototype); function SelectedVertexStyle5() { BaseVertexStyle.apply(this, arguments); this.strokeStyle = '#FF6200'; this.mainTextColor = '#FF6200'; this.fillStyle = '#0F4FA8'; this.baseStyles.push("selected"); } SelectedVertexStyle5.prototype = Object.create(BaseVertexStyle.prototype); function SelectedVertexStyle6() { BaseVertexStyle.apply(this, arguments); this.strokeStyle = '#8CA336'; this.mainTextColor = '#8CA336'; this.fillStyle = '#9C344C'; this.baseStyles.push("selected"); } SelectedVertexStyle6.prototype = Object.create(BaseVertexStyle.prototype); function SelectedVertexStyle7() { BaseVertexStyle.apply(this, arguments); this.strokeStyle = '#B59E22'; this.mainTextColor = '#B59E22'; this.fillStyle = '#22387A'; this.baseStyles.push("selected"); } SelectedVertexStyle7.prototype = Object.create(BaseVertexStyle.prototype); function SelectedVertexStyle8() { BaseVertexStyle.apply(this, arguments); this.strokeStyle = '#08806C'; this.mainTextColor = '#08806C'; this.fillStyle = '#CA980D'; this.baseStyles.push("selected"); } SelectedVertexStyle8.prototype = Object.create(BaseVertexStyle.prototype); function SelectedVertexStyle9() { BaseVertexStyle.apply(this, arguments); this.strokeStyle = '#AA8134'; this.mainTextColor = '#AA8134'; this.fillStyle = '#492A73'; this.baseStyles.push("selected"); } SelectedVertexStyle9.prototype = Object.create(BaseVertexStyle.prototype); function SelectedPrintVertexStyle() { BaseVertexStyle.apply(this, arguments); this.strokeStyle = '#000000'; this.mainTextColor = '#000000'; this.fillStyle = '#AAAAAA'; this.baseStyles.push("printed"); } SelectedPrintVertexStyle.prototype = Object.create(BaseVertexStyle.prototype); var DefaultSelectedGraphStyles = [new SelectedVertexStyle0(), new SelectedVertexStyle1(), new SelectedVertexStyle2(), new SelectedVertexStyle3(), new SelectedVertexStyle4(), new SelectedVertexStyle5(), new SelectedVertexStyle6(), new SelectedVertexStyle7(), new SelectedVertexStyle8(), new SelectedVertexStyle9()]; var DefaultPrintSelectedGraphStyles = [new SelectedPrintVertexStyle()]; function BaseVertexDrawer(context) { this.context = context; } BaseVertexDrawer.prototype.Draw = function(baseGraph, graphStyle) { this.SetupStyle(graphStyle); this.DrawShape(baseGraph); this.context.stroke(); this.context.fill(); this.DrawCenterText(baseGraph.position, baseGraph.mainText, graphStyle.mainTextColor, graphStyle.fillStyle, true, true, 16); // Top text this.DrawCenterText(baseGraph.position.add(new Point(0, - baseGraph.model.diameter / 2.0 - 9.0)), baseGraph.upText, graphStyle.fillStyle, graphStyle.strokeStyle, false, false, 12.0); /* // Bottom text this.DrawCenterText(baseGraph.position.add(new Point(0, + baseGraph.model.diameter / 2.0 + 7.0)), "Text 2", graphStyle.fillStyle, false, 12.0); */ } BaseVertexDrawer.prototype.SetupStyle = function(style) { this.context.lineWidth = style.lineWidth; this.context.strokeStyle = style.strokeStyle; this.context.fillStyle = style.fillStyle; } BaseVertexDrawer.prototype.DrawShape = function(baseGraph) { this.context.beginPath(); this.context.arc(baseGraph.position.x, baseGraph.position.y, baseGraph.model.diameter / 2.0, 0, 2 * Math.PI); this.context.closePath(); } BaseVertexDrawer.prototype.DrawText = function(position, text, color, outlineColor, outline, font) { this.context.fillStyle = color; this.context.font = font; this.context.lineWidth = 4; this.context.strokeStyle = outlineColor; if (outline) { this.context.save(); this.context.lineJoin = 'round'; this.context.strokeText(text, position.x, position.y); this.context.restore(); } this.context.fillText(text, position.x, position.y); } BaseVertexDrawer.prototype.DrawCenterText = function(position, text, color, outlineColor, bold, outline, size) { this.context.textBaseline="middle"; this.context.font = (bold ? "bold " : "") + size + "px sans-serif"; var textWidth = this.context.measureText(text).width; this.DrawText(new Point(position.x - textWidth / 2, position.y), text, color, outlineColor, outline, this.context.font); }