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 VML implementation.
19
 * @author [email protected] (Erik Arvidsson)
20
 */
21

22
goog.provide('goog.graphics.VmlEllipseElement');
23
goog.provide('goog.graphics.VmlGroupElement');
24
goog.provide('goog.graphics.VmlImageElement');
25
goog.provide('goog.graphics.VmlPathElement');
26
goog.provide('goog.graphics.VmlRectElement');
27
goog.provide('goog.graphics.VmlTextElement');
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
 * Returns the VML element corresponding to this object.  This method is added
41
 * to several classes below.  Note that the return value of this method may
42
 * change frequently in IE8, so it should not be cached externally.
43
 * @return {Element} The VML element corresponding to this object.
44
 * @this {goog.graphics.VmlGroupElement|goog.graphics.VmlEllipseElement|
45
 *     goog.graphics.VmlRectElement|goog.graphics.VmlPathElement|
46
 *     goog.graphics.VmlTextElement|goog.graphics.VmlImageElement}
47
 * @private
48
 */
49
goog.graphics.vmlGetElement_ = function() {
50
  this.element_ = this.getGraphics().getVmlElement(this.id_) || this.element_;
51
  return this.element_;
52
};
53

54

55

56
/**
57
 * Thin wrapper for VML group elements.
58
 * This is an implementation of the goog.graphics.GroupElement interface.
59
 * You should not construct objects from this constructor. The graphics
60
 * will return the object for you.
61
 * @param {Element} element The DOM element to wrap.
62
 * @param {goog.graphics.VmlGraphics} graphics The graphics creating
63
 *     this element.
64
 * @constructor
65
 * @extends {goog.graphics.GroupElement}
66
 * @deprecated goog.graphics is deprecated. It existed to abstract over browser
67
 *     differences before the canvas tag was widely supported.  See
68
 *     http://en.wikipedia.org/wiki/Canvas_element for details.
69
 * @final
70
 */
71
goog.graphics.VmlGroupElement = function(element, graphics) {
72
  this.id_ = element.id;
73
  goog.graphics.GroupElement.call(this, element, graphics);
74
};
75
goog.inherits(goog.graphics.VmlGroupElement, goog.graphics.GroupElement);
76

77

78
/** @override */
79
goog.graphics.VmlGroupElement.prototype.getElement =
80
    goog.graphics.vmlGetElement_;
81

82

83
/**
84
 * Remove all drawing elements from the group.
85
 * @override
86
 */
87
goog.graphics.VmlGroupElement.prototype.clear = function() {
88
  goog.dom.removeChildren(this.getElement());
89
};
90

91

92
/**
93
 * @return {boolean} True if this group is the root canvas element.
94
 * @private
95
 */
96
goog.graphics.VmlGroupElement.prototype.isRootElement_ = function() {
97
  return this.getGraphics().getCanvasElement() == this;
98
};
99

100

101
/**
102
 * Set the size of the group element.
103
 * @param {number|string} width The width of the group element.
104
 * @param {number|string} height The height of the group element.
105
 * @override
106
 * @suppress {missingRequire} goog.graphics.VmlGraphics
107
 */
108
goog.graphics.VmlGroupElement.prototype.setSize = function(width, height) {
109
  var element = this.getElement();
110

111
  var style = element.style;
112
  style.width = goog.graphics.VmlGraphics.toSizePx(width);
113
  style.height = goog.graphics.VmlGraphics.toSizePx(height);
114

115
  element.coordsize = goog.graphics.VmlGraphics.toSizeCoord(width) + ' ' +
116
      goog.graphics.VmlGraphics.toSizeCoord(height);
117

118
  // Don't overwrite the root element's origin.
119
  if (!this.isRootElement_()) {
120
    element.coordorigin = '0 0';
121
  }
122
};
123

124

125

126
/**
127
 * Thin wrapper for VML ellipse elements.
128
 * This is an implementation of the goog.graphics.EllipseElement interface.
129
 * You should not construct objects from this constructor. The graphics
130
 * will return the object for you.
131
 * @param {Element} element The DOM element to wrap.
132
 * @param {goog.graphics.VmlGraphics} graphics  The graphics creating
133
 *     this element.
134
 * @param {number} cx Center X coordinate.
135
 * @param {number} cy Center Y coordinate.
136
 * @param {number} rx Radius length for the x-axis.
137
 * @param {number} ry Radius length for the y-axis.
138
 * @param {goog.graphics.Stroke?} stroke The stroke to use for this element.
139
 * @param {goog.graphics.Fill?} fill The fill to use for this element.
140
 * @constructor
141
 * @extends {goog.graphics.EllipseElement}
142
 * @deprecated goog.graphics is deprecated. It existed to abstract over browser
143
 *     differences before the canvas tag was widely supported.  See
144
 *     http://en.wikipedia.org/wiki/Canvas_element for details.
145
 * @final
146
 */
147
goog.graphics.VmlEllipseElement = function(
148
    element, graphics, cx, cy, rx, ry, stroke, fill) {
149
  this.id_ = element.id;
150

151
  goog.graphics.EllipseElement.call(this, element, graphics, stroke, fill);
152

153
  // Store center and radius for future calls to setRadius or setCenter.
154

155
  /**
156
   * X coordinate of the ellipse center.
157
   * @type {number}
158
   */
159
  this.cx = cx;
160

161

162
  /**
163
   * Y coordinate of the ellipse center.
164
   * @type {number}
165
   */
166
  this.cy = cy;
167

168

169
  /**
170
   * Radius length for the x-axis.
171
   * @type {number}
172
   */
173
  this.rx = rx;
174

175

176
  /**
177
   * Radius length for the y-axis.
178
   * @type {number}
179
   */
180
  this.ry = ry;
181
};
182
goog.inherits(goog.graphics.VmlEllipseElement, goog.graphics.EllipseElement);
183

184

185
/** @override */
186
goog.graphics.VmlEllipseElement.prototype.getElement =
187
    goog.graphics.vmlGetElement_;
188

189

190
/**
191
 * Update the center point of the ellipse.
192
 * @param {number} cx Center X coordinate.
193
 * @param {number} cy Center Y coordinate.
194
 * @override
195
 */
196
goog.graphics.VmlEllipseElement.prototype.setCenter = function(cx, cy) {
197
  this.cx = cx;
198
  this.cy = cy;
199
  /** @suppress {missingRequire} */
200
  goog.graphics.VmlGraphics.setPositionAndSize(
201
      this.getElement(), cx - this.rx, cy - this.ry, this.rx * 2, this.ry * 2);
202
};
203

204

205
/**
206
 * Update the radius of the ellipse.
207
 * @param {number} rx Center X coordinate.
208
 * @param {number} ry Center Y coordinate.
209
 * @override
210
 */
211
goog.graphics.VmlEllipseElement.prototype.setRadius = function(rx, ry) {
212
  this.rx = rx;
213
  this.ry = ry;
214
  /** @suppress {missingRequire} */
215
  goog.graphics.VmlGraphics.setPositionAndSize(
216
      this.getElement(), this.cx - rx, this.cy - ry, rx * 2, ry * 2);
217
};
218

219

220

221
/**
222
 * Thin wrapper for VML rectangle elements.
223
 * This is an implementation of the goog.graphics.RectElement interface.
224
 * You should not construct objects from this constructor. The graphics
225
 * will return the object for you.
226
 * @param {Element} element The DOM element to wrap.
227
 * @param {goog.graphics.VmlGraphics} graphics The graphics creating
228
 *     this element.
229
 * @param {goog.graphics.Stroke?} stroke The stroke to use for this element.
230
 * @param {goog.graphics.Fill?} fill The fill to use for this element.
231
 * @constructor
232
 * @extends {goog.graphics.RectElement}
233
 * @deprecated goog.graphics is deprecated. It existed to abstract over browser
234
 *     differences before the canvas tag was widely supported.  See
235
 *     http://en.wikipedia.org/wiki/Canvas_element for details.
236
 * @final
237
 */
238
goog.graphics.VmlRectElement = function(element, graphics, stroke, fill) {
239
  this.id_ = element.id;
240
  goog.graphics.RectElement.call(this, element, graphics, stroke, fill);
241
};
242
goog.inherits(goog.graphics.VmlRectElement, goog.graphics.RectElement);
243

244

245
/** @override */
246
goog.graphics.VmlRectElement.prototype.getElement =
247
    goog.graphics.vmlGetElement_;
248

249

250
/**
251
 * Update the position of the rectangle.
252
 * @param {number} x X coordinate (left).
253
 * @param {number} y Y coordinate (top).
254
 * @override
255
 */
256
goog.graphics.VmlRectElement.prototype.setPosition = function(x, y) {
257
  var style = this.getElement().style;
258

259
  style.left = /** @suppress {missingRequire} */
260
      goog.graphics.VmlGraphics.toPosPx(x);
261
  style.top = /** @suppress {missingRequire} */
262
      goog.graphics.VmlGraphics.toPosPx(y);
263
};
264

265

266
/**
267
 * Update the size of the rectangle.
268
 * @param {number} width Width of rectangle.
269
 * @param {number} height Height of rectangle.
270
 * @override
271
 * @suppress {missingRequire} goog.graphics.VmlGraphics
272
 */
273
goog.graphics.VmlRectElement.prototype.setSize = function(width, height) {
274
  var style = this.getElement().style;
275
  style.width = goog.graphics.VmlGraphics.toSizePx(width);
276
  style.height = goog.graphics.VmlGraphics.toSizePx(height);
277
};
278

279

280

281
/**
282
 * Thin wrapper for VML path elements.
283
 * This is an implementation of the goog.graphics.PathElement interface.
284
 * You should not construct objects from this constructor. The graphics
285
 * will return the object for you.
286
 * @param {Element} element The DOM element to wrap.
287
 * @param {goog.graphics.VmlGraphics} graphics The graphics creating
288
 *     this element.
289
 * @param {goog.graphics.Stroke?} stroke The stroke to use for this element.
290
 * @param {goog.graphics.Fill?} fill The fill to use for this element.
291
 * @constructor
292
 * @extends {goog.graphics.PathElement}
293
 * @deprecated goog.graphics is deprecated. It existed to abstract over browser
294
 *     differences before the canvas tag was widely supported.  See
295
 *     http://en.wikipedia.org/wiki/Canvas_element for details.
296
 * @final
297
 */
298
goog.graphics.VmlPathElement = function(element, graphics, stroke, fill) {
299
  this.id_ = element.id;
300
  goog.graphics.PathElement.call(this, element, graphics, stroke, fill);
301
};
302
goog.inherits(goog.graphics.VmlPathElement, goog.graphics.PathElement);
303

304

305
/** @override */
306
goog.graphics.VmlPathElement.prototype.getElement =
307
    goog.graphics.vmlGetElement_;
308

309

310
/**
311
 * Update the underlying path.
312
 * @param {!goog.graphics.Path} path The path object to draw.
313
 * @override
314
 */
315
goog.graphics.VmlPathElement.prototype.setPath = function(path) {
316
  /** @suppress {missingRequire} */
317
  goog.graphics.VmlGraphics.setAttribute(
318
      this.getElement(), 'path',
319
      /** @suppress {missingRequire} */
320
      goog.graphics.VmlGraphics.getVmlPath(path));
321
};
322

323

324

325
/**
326
 * Thin wrapper for VML text elements.
327
 * This is an implementation of the goog.graphics.TextElement interface.
328
 * You should not construct objects from this constructor. The graphics
329
 * will return the object for you.
330
 * @param {Element} element The DOM element to wrap.
331
 * @param {goog.graphics.VmlGraphics} graphics The graphics creating
332
 *     this element.
333
 * @param {goog.graphics.Stroke?} stroke The stroke to use for this element.
334
 * @param {goog.graphics.Fill?} fill The fill to use for this element.
335
 * @constructor
336
 * @extends {goog.graphics.TextElement}
337
 * @deprecated goog.graphics is deprecated. It existed to abstract over browser
338
 *     differences before the canvas tag was widely supported.  See
339
 *     http://en.wikipedia.org/wiki/Canvas_element for details.
340
 * @final
341
 */
342
goog.graphics.VmlTextElement = function(element, graphics, stroke, fill) {
343
  this.id_ = element.id;
344
  goog.graphics.TextElement.call(this, element, graphics, stroke, fill);
345
};
346
goog.inherits(goog.graphics.VmlTextElement, goog.graphics.TextElement);
347

348

349
/** @override */
350
goog.graphics.VmlTextElement.prototype.getElement =
351
    goog.graphics.vmlGetElement_;
352

353

354
/**
355
 * Update the displayed text of the element.
356
 * @param {string} text The text to draw.
357
 * @override
358
 */
359
goog.graphics.VmlTextElement.prototype.setText = function(text) {
360
  /** @suppress {missingRequire} */
361
  goog.graphics.VmlGraphics.setAttribute(
362
      /** @type {!Element} */ (this.getElement().childNodes[1]), 'string',
363
      text);
364
};
365

366

367

368
/**
369
 * Thin wrapper for VML image elements.
370
 * This is an implementation of the goog.graphics.ImageElement interface.
371
 * You should not construct objects from this constructor. The graphics
372
 * will return the object for you.
373
 * @param {Element} element The DOM element to wrap.
374
 * @param {goog.graphics.VmlGraphics} graphics The graphics creating
375
 *     this element.
376
 * @constructor
377
 * @extends {goog.graphics.ImageElement}
378
 * @deprecated goog.graphics is deprecated. It existed to abstract over browser
379
 *     differences before the canvas tag was widely supported.  See
380
 *     http://en.wikipedia.org/wiki/Canvas_element for details.
381
 * @final
382
 */
383
goog.graphics.VmlImageElement = function(element, graphics) {
384
  this.id_ = element.id;
385
  goog.graphics.ImageElement.call(this, element, graphics);
386
};
387
goog.inherits(goog.graphics.VmlImageElement, goog.graphics.ImageElement);
388

389

390
/** @override */
391
goog.graphics.VmlImageElement.prototype.getElement =
392
    goog.graphics.vmlGetElement_;
393

394

395
/**
396
 * Update the position of the image.
397
 * @param {number} x X coordinate (left).
398
 * @param {number} y Y coordinate (top).
399
 * @override
400
 */
401
goog.graphics.VmlImageElement.prototype.setPosition = function(x, y) {
402
  var style = this.getElement().style;
403

404
  style.left = /** @suppress {missingRequire} */
405
      goog.graphics.VmlGraphics.toPosPx(x);
406
  style.top = /** @suppress {missingRequire} */
407
      goog.graphics.VmlGraphics.toPosPx(y);
408
};
409

410

411
/**
412
 * Update the size of the image.
413
 * @param {number} width Width of rectangle.
414
 * @param {number} height Height of rectangle.
415
 * @override
416
 * @suppress {missingRequire} goog.graphics.VmlGraphics
417
 */
418
goog.graphics.VmlImageElement.prototype.setSize = function(width, height) {
419
  var style = this.getElement().style;
420
  style.width = goog.graphics.VmlGraphics.toPosPx(width);
421
  style.height = goog.graphics.VmlGraphics.toPosPx(height);
422
};
423

424

425
/**
426
 * Update the source of the image.
427
 * @param {string} src Source of the image.
428
 * @override
429
 */
430
goog.graphics.VmlImageElement.prototype.setSource = function(src) {
431
  /** @suppress {missingRequire} */
432
  goog.graphics.VmlGraphics.setAttribute(this.getElement(), 'src', src);
433
};
434

435