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
|
SVG.Box = SVG.invent({
create: function (source) {
var base = [0, 0, 0, 0]
source = typeof source === 'string' ? source.split(SVG.regex.delimiter).map(parseFloat)
: Array.isArray(source) ? source
: typeof source === 'object' ? [source.left != null ? source.left
: source.x, source.top != null ? source.top : source.y, source.width, source.height]
: arguments.length === 4 ? [].slice.call(arguments)
: base
this.x = source[0]
this.y = source[1]
this.width = source[2]
this.height = source[3]
// add center, right, bottom...
fullBox(this)
},
extend: {
// Merge rect box with another, return a new instance
merge: function (box) {
var x = Math.min(this.x, box.x)
var y = Math.min(this.y, box.y)
return new SVG.Box(
x, y,
Math.max(this.x + this.width, box.x + box.width) - x,
Math.max(this.y + this.height, box.y + box.height) - y
)
},
transform: function (m) {
var xMin = Infinity
var xMax = -Infinity
var yMin = Infinity
var yMax = -Infinity
var pts = [
new SVG.Point(this.x, this.y),
new SVG.Point(this.x2, this.y),
new SVG.Point(this.x, this.y2),
new SVG.Point(this.x2, this.y2)
]
pts.forEach(function (p) {
p = p.transform(m)
xMin = Math.min(xMin, p.x)
xMax = Math.max(xMax, p.x)
yMin = Math.min(yMin, p.y)
yMax = Math.max(yMax, p.y)
})
return new SVG.Box(
xMin, yMin,
xMax - xMin,
yMax - yMin
)
},
addOffset: function () {
// offset by window scroll position, because getBoundingClientRect changes when window is scrolled
this.x += window.pageXOffset
this.y += window.pageYOffset
return this
},
toString: function () {
return this.x + ' ' + this.y + ' ' + this.width + ' ' + this.height
},
morph: function (x, y, width, height) {
this.destination = new SVG.Box(x, y, width, height)
return this
},
at: function (pos) {
if (!this.destination) return this
return new SVG.Box(
this.x + (this.destination.x - this.x) * pos
, this.y + (this.destination.y - this.y) * pos
, this.width + (this.destination.width - this.width) * pos
, this.height + (this.destination.height - this.height) * pos
)
}
},
// Define Parent
parent: SVG.Element,
// Constructor
construct: {
// Get bounding box
bbox: function () {
var box
try {
// find native bbox
box = this.node.getBBox()
if (isNulledBox(box) && !domContains(this.node)) {
throw new Exception('Element not in the dom')
}
} catch (e) {
try {
var clone = this.clone(SVG.parser().svg).show()
box = clone.node.getBBox()
clone.remove()
} catch (e) {
console.warn('Getting a bounding box of this element is not possible')
}
}
return new SVG.Box(box)
},
rbox: function (el) {
// IE11 throws an error when element not in dom
try {
var box = new SVG.Box(this.node.getBoundingClientRect())
if (el) return box.transform(el.screenCTM().inverse())
return box.addOffset()
} catch (e) {
return new SVG.Box()
}
}
}
})
SVG.extend([SVG.Doc, SVG.Nested, SVG.Symbol, SVG.Image, SVG.Pattern, SVG.Marker, SVG.ForeignObject, SVG.View], {
viewbox: function (x, y, width, height) {
// act as getter
if (x == null) return new SVG.Box(this.attr('viewBox'))
// act as setter
return this.attr('viewBox', new SVG.Box(x, y, width, height))
}
})
|
