1
// Copyright 2007 The Closure Library Authors. All Rights Reserved.
2
//
3
// Licensed under the Apache License, Version 2.0 (the "License");
4
// you may not use this file except in compliance with the License.
5
// You may obtain a copy of the License at
6
//
7
//      http://www.apache.org/licenses/LICENSE-2.0
8
//
9
// Unless required by applicable law or agreed to in writing, software
10
// distributed under the License is distributed on an "AS-IS" BASIS,
11
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12
// See the License for the specific language governing permissions and
13
// limitations under the License.
14

15

16
/**
17
 * @fileoverview Thin wrappers around the DOM element returned from
18
 * the different draw methods of the graphics. This is the SVG implementation.
19
 * @author [email protected] (Erik Arvidsson)
20
 */
21

22
goog.provide('goog.graphics.SvgEllipseElement');
23
goog.provide('goog.graphics.SvgGroupElement');
24
goog.provide('goog.graphics.SvgImageElement');
25
goog.provide('goog.graphics.SvgPathElement');
26
goog.provide('goog.graphics.SvgRectElement');
27
goog.provide('goog.graphics.SvgTextElement');
28

29

30
goog.require('goog.dom');
31
goog.require('goog.graphics.EllipseElement');
32
goog.require('goog.graphics.GroupElement');
33
goog.require('goog.graphics.ImageElement');
34
goog.require('goog.graphics.PathElement');
35
goog.require('goog.graphics.RectElement');
36
goog.require('goog.graphics.TextElement');
37

38

39

40
/**
41
 * Thin wrapper for SVG group elements.
42
 * You should not construct objects from this constructor. The graphics
43
 * will return the object for you.
44
 * @param {Element} element The DOM element to wrap.
45
 * @param {goog.graphics.SvgGraphics} graphics The graphics creating
46
 *     this element.
47
 * @constructor
48
 * @extends {goog.graphics.GroupElement}
49
 * @deprecated goog.graphics is deprecated. It existed to abstract over browser
50
 *     differences before the canvas tag was widely supported.  See
51
 *     http://en.wikipedia.org/wiki/Canvas_element for details.
52
 * @final
53
 */
54
goog.graphics.SvgGroupElement = function(element, graphics) {
55
  goog.graphics.GroupElement.call(this, element, graphics);
56
};
57
goog.inherits(goog.graphics.SvgGroupElement, goog.graphics.GroupElement);
58

59

60
/**
61
 * Remove all drawing elements from the group.
62
 * @override
63
 */
64
goog.graphics.SvgGroupElement.prototype.clear = function() {
65
  goog.dom.removeChildren(this.getElement());
66
};
67

68

69
/**
70
 * Set the size of the group element.
71
 * @param {number|string} width The width of the group element.
72
 * @param {number|string} height The height of the group element.
73
 * @override
74
 */
75
goog.graphics.SvgGroupElement.prototype.setSize = function(width, height) {
76
  this.getGraphics().setElementAttributes(
77
      this.getElement(), {'width': width, 'height': height});
78
};
79

80

81

82
/**
83
 * Thin wrapper for SVG ellipse elements.
84
 * This is an implementation of the goog.graphics.EllipseElement interface.
85
 * You should not construct objects from this constructor. The graphics
86
 * will return the object for you.
87
 * @param {Element} element The DOM element to wrap.
88
 * @param {goog.graphics.SvgGraphics} graphics The graphics creating
89
 *     this element.
90
 * @param {goog.graphics.Stroke?} stroke The stroke to use for this element.
91
 * @param {goog.graphics.Fill?} fill The fill to use for this element.
92
 * @constructor
93
 * @extends {goog.graphics.EllipseElement}
94
 * @final
95
 */
96
goog.graphics.SvgEllipseElement = function(element, graphics, stroke, fill) {
97
  goog.graphics.EllipseElement.call(this, element, graphics, stroke, fill);
98
};
99
goog.inherits(goog.graphics.SvgEllipseElement, goog.graphics.EllipseElement);
100

101

102
/**
103
 * Update the center point of the ellipse.
104
 * @param {number} cx Center X coordinate.
105
 * @param {number} cy Center Y coordinate.
106
 * @override
107
 */
108
goog.graphics.SvgEllipseElement.prototype.setCenter = function(cx, cy) {
109
  this.getGraphics().setElementAttributes(
110
      this.getElement(), {'cx': cx, 'cy': cy});
111
};
112

113

114
/**
115
 * Update the radius of the ellipse.
116
 * @param {number} rx Radius length for the x-axis.
117
 * @param {number} ry Radius length for the y-axis.
118
 * @override
119
 */
120
goog.graphics.SvgEllipseElement.prototype.setRadius = function(rx, ry) {
121
  this.getGraphics().setElementAttributes(
122
      this.getElement(), {'rx': rx, 'ry': ry});
123
};
124

125

126

127
/**
128
 * Thin wrapper for SVG rectangle elements.
129
 * This is an implementation of the goog.graphics.RectElement interface.
130
 * You should not construct objects from this constructor. The graphics
131
 * will return the object for you.
132
 * @param {Element} element The DOM element to wrap.
133
 * @param {goog.graphics.SvgGraphics} graphics The graphics creating
134
 *     this element.
135
 * @param {goog.graphics.Stroke?} stroke The stroke to use for this element.
136
 * @param {goog.graphics.Fill?} fill The fill to use for this element.
137
 * @constructor
138
 * @extends {goog.graphics.RectElement}
139
 * @final
140
 */
141
goog.graphics.SvgRectElement = function(element, graphics, stroke, fill) {
142
  goog.graphics.RectElement.call(this, element, graphics, stroke, fill);
143
};
144
goog.inherits(goog.graphics.SvgRectElement, goog.graphics.RectElement);
145

146

147
/**
148
 * Update the position of the rectangle.
149
 * @param {number} x X coordinate (left).
150
 * @param {number} y Y coordinate (top).
151
 * @override
152
 */
153
goog.graphics.SvgRectElement.prototype.setPosition = function(x, y) {
154
  this.getGraphics().setElementAttributes(this.getElement(), {'x': x, 'y': y});
155
};
156

157

158
/**
159
 * Update the size of the rectangle.
160
 * @param {number} width Width of rectangle.
161
 * @param {number} height Height of rectangle.
162
 * @override
163
 */
164
goog.graphics.SvgRectElement.prototype.setSize = function(width, height) {
165
  this.getGraphics().setElementAttributes(
166
      this.getElement(), {'width': width, 'height': height});
167
};
168

169

170

171
/**
172
 * Thin wrapper for SVG path elements.
173
 * This is an implementation of the goog.graphics.PathElement interface.
174
 * You should not construct objects from this constructor. The graphics
175
 * will return the object for you.
176
 * @param {Element} element The DOM element to wrap.
177
 * @param {goog.graphics.SvgGraphics} graphics The graphics creating
178
 *     this element.
179
 * @param {goog.graphics.Stroke?} stroke The stroke to use for this element.
180
 * @param {goog.graphics.Fill?} fill The fill to use for this element.
181
 * @constructor
182
 * @extends {goog.graphics.PathElement}
183
 * @final
184
 */
185
goog.graphics.SvgPathElement = function(element, graphics, stroke, fill) {
186
  goog.graphics.PathElement.call(this, element, graphics, stroke, fill);
187
};
188
goog.inherits(goog.graphics.SvgPathElement, goog.graphics.PathElement);
189

190

191
/**
192
 * Update the underlying path.
193
 * @param {!goog.graphics.Path} path The path object to draw.
194
 * @override
195
 */
196
goog.graphics.SvgPathElement.prototype.setPath = function(path) {
197
  /** @suppress {missingRequire} goog.graphics.SvgGraphics */
198
  this.getGraphics().setElementAttributes(
199
      this.getElement(), {'d': goog.graphics.SvgGraphics.getSvgPath(path)});
200
};
201

202

203

204
/**
205
 * Thin wrapper for SVG text elements.
206
 * This is an implementation of the goog.graphics.TextElement interface.
207
 * You should not construct objects from this constructor. The graphics
208
 * will return the object for you.
209
 * @param {Element} element The DOM element to wrap.
210
 * @param {goog.graphics.SvgGraphics} graphics The graphics creating
211
 *     this element.
212
 * @param {goog.graphics.Stroke?} stroke The stroke to use for this element.
213
 * @param {goog.graphics.Fill?} fill The fill to use for this element.
214
 * @constructor
215
 * @extends {goog.graphics.TextElement}
216
 * @final
217
 */
218
goog.graphics.SvgTextElement = function(element, graphics, stroke, fill) {
219
  goog.graphics.TextElement.call(this, element, graphics, stroke, fill);
220
};
221
goog.inherits(goog.graphics.SvgTextElement, goog.graphics.TextElement);
222

223

224
/**
225
 * Update the displayed text of the element.
226
 * @param {string} text The text to draw.
227
 * @override
228
 */
229
goog.graphics.SvgTextElement.prototype.setText = function(text) {
230
  this.getElement().firstChild.data = text;
231
};
232

233

234

235
/**
236
 * Thin wrapper for SVG image elements.
237
 * This is an implementation of the goog.graphics.ImageElement interface.
238
 * You should not construct objects from this constructor. The graphics
239
 * will return the object for you.
240
 * @param {Element} element The DOM element to wrap.
241
 * @param {goog.graphics.SvgGraphics} graphics The graphics creating
242
 *     this element.
243
 * @constructor
244
 * @extends {goog.graphics.ImageElement}
245
 * @final
246
 */
247
goog.graphics.SvgImageElement = function(element, graphics) {
248
  goog.graphics.ImageElement.call(this, element, graphics);
249
};
250
goog.inherits(goog.graphics.SvgImageElement, goog.graphics.ImageElement);
251

252

253
/**
254
 * Update the position of the image.
255
 * @param {number} x X coordinate (left).
256
 * @param {number} y Y coordinate (top).
257
 * @override
258
 */
259
goog.graphics.SvgImageElement.prototype.setPosition = function(x, y) {
260
  this.getGraphics().setElementAttributes(this.getElement(), {'x': x, 'y': y});
261
};
262

263

264
/**
265
 * Update the size of the image.
266
 * @param {number} width Width of image.
267
 * @param {number} height Height of image.
268
 * @override
269
 */
270
goog.graphics.SvgImageElement.prototype.setSize = function(width, height) {
271
  this.getGraphics().setElementAttributes(
272
      this.getElement(), {'width': width, 'height': height});
273
};
274

275

276
/**
277
 * Update the source of the image.
278
 * @param {string} src Source of the image.
279
 * @override
280
 */
281
goog.graphics.SvgImageElement.prototype.setSource = function(src) {
282
  this.getGraphics().setElementAttributes(
283
      this.getElement(), {'xlink:href': src});
284
};
285

286