SvgButton_wev8.js
4.49 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
/*
Copyright (c) 2004-2005, The Dojo Foundation
All Rights Reserved.
Licensed under the Academic Free License version 2.1 or above OR the
modified BSD license. For more information on Dojo licensing, see:
http://dojotoolkit.org/community/licensing.shtml
*/
// FIXME: not yet functional
dojo.provide("dojo.widget.SvgButton");
dojo.require("dojo.widget.Button");
dojo.widget.SvgButton = function(){
// FIXME: this is incomplete and doesn't work yet
// if DOMButton turns into a mixin, we should subclass Button instead and
// just mix in the DOMButton properties.
dojo.widget.DomButton.call(this);
dojo.widget.SvgWidget.call(this);
// FIXME: freaking implement this already!
this.onFoo = function(){ alert("bar"); }
this.label = "huzzah!";
this.setLabel = function(x, y, textSize, label, shape){
//var labelNode = this.domNode.ownerDocument.createTextNode(this.label);
//var textNode = this.domNode.ownerDocument.createElement("text");
var coords = dojo.widget.SvgButton.prototype.coordinates(x, y, textSize, label, shape);
var textString = "";
switch(shape) {
case "ellipse":
textString = "<text x='"+ coords[6] + "' y='"+ coords[7] + "'>"+ label + "</text>";
//textNode.setAttribute("x", coords[6]);
//textNode.setAttribute("y", coords[7]);
break;
case "rectangle":
//FIXME: implement
textString = "";
//textNode.setAttribute("x", coords[6]);
//textNode.setAttribute("y", coords[7]);
break;
case "circle":
//FIXME: implement
textString = "";
//textNode.setAttribute("x", coords[6]);
//textNode.setAttribute("y", coords[7]);
break;
}
//textNode.appendChild(labelNode);
//this.domNode.appendChild(textNode);
return textString;
alert(textNode.getComputedTextLength());
}
this.fillInTemplate = function(x, y, textSize, label, shape){
// the idea is to set the text to the appropriate place given its length
// and the template shape
// FIXME: For now, assuming text sizes are integers in SVG units
this.textSize = textSize || 12;
this.label = label;
// FIXEME: for now, I'm going to fake this... need to come up with a real way to
// determine the actual width of the text, such as computedStyle
var textWidth = this.label.length*this.textSize ;
//this.setLabel();
}
}
dojo.inherits(dojo.widget.SvgButton, dojo.widget.DomButton);
// FIXME
dojo.widget.SvgButton.prototype.shapeString = function(x, y, textSize, label, shape) {
switch(shape) {
case "ellipse":
var coords = dojo.widget.SvgButton.prototype.coordinates(x, y, textSize, label, shape)
return "<ellipse cx='"+ coords[4]+"' cy='"+ coords[5]+"' rx='"+ coords[2]+"' ry='"+ coords[3]+"'/>";
break;
case "rect":
//FIXME: implement
return "";
//return "<rect x='110' y='45' width='70' height='30'/>";
break;
case "circle":
//FIXME: implement
return "";
//return "<circle cx='210' cy='60' r='23'/>";
break;
}
}
dojo.widget.SvgButton.prototype.coordinates = function(x, y, textSize, label, shape) {
switch(shape) {
case "ellipse":
var buttonWidth = label.length*textSize;
var buttonHeight = textSize*2.5
var rx = buttonWidth/2;
var ry = buttonHeight/2;
var cx = rx + x;
var cy = ry + y;
var textX = cx - rx*textSize/25;
var textY = cy*1.1;
return [buttonWidth, buttonHeight, rx, ry, cx, cy, textX, textY];
break;
case "rectangle":
//FIXME: implement
return "";
break;
case "circle":
//FIXME: implement
return "";
break;
}
}
dojo.widget.SvgButton.prototype.labelString = function(x, y, textSize, label, shape){
var textString = "";
var coords = dojo.widget.SvgButton.prototype.coordinates(x, y, textSize, label, shape);
switch(shape) {
case "ellipse":
textString = "<text x='"+ coords[6] + "' y='"+ coords[7] + "'>"+ label + "</text>";
break;
case "rectangle":
//FIXME: implement
textString = "";
break;
case "circle":
//FIXME: implement
textString = "";
break;
}
return textString;
}
//dojo.widget.SVGButton.prototype.templateString = "<g class='dojoButton' dojoAttachEvent='onClick; onMouseMove: onFoo;' dojoAttachPoint='labelNode'>"+ dojo.webui.widgets.SVGButton.prototype.shapeString("ellipse") + "</g>";
dojo.widget.SvgButton.prototype.templateString = function(x, y, textSize, label, shape) {
return "<g class='dojoButton' dojoAttachEvent='onClick; onMouseMove: onFoo;' dojoAttachPoint='labelNode'>"+ dojo.webui.widgets.SVGButton.prototype.shapeString(x, y, textSize, label, shape) + dojo.widget.SVGButton.prototype.labelString(x, y, textSize, label, shape) + "</g>";
}