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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
|
import { registerMethods } from '../../utils/methods.js'
import Color from '../../types/Color.js'
import Element from '../../elements/Element.js'
import Matrix from '../../types/Matrix.js'
import Point from '../../types/Point.js'
import SVGNumber from '../../types/SVGNumber.js'
// Define list of available attributes for stroke and fill
const sugar = {
stroke: [
'color',
'width',
'opacity',
'linecap',
'linejoin',
'miterlimit',
'dasharray',
'dashoffset'
],
fill: ['color', 'opacity', 'rule'],
prefix: function (t, a) {
return a === 'color' ? t : t + '-' + a
}
}
// Add sugar for fill and stroke
;['fill', 'stroke'].forEach(function (m) {
const extension = {}
let i
extension[m] = function (o) {
if (typeof o === 'undefined') {
return this.attr(m)
}
if (
typeof o === 'string' ||
o instanceof Color ||
Color.isRgb(o) ||
o instanceof Element
) {
this.attr(m, o)
} else {
// set all attributes from sugar.fill and sugar.stroke list
for (i = sugar[m].length - 1; i >= 0; i--) {
if (o[sugar[m][i]] != null) {
this.attr(sugar.prefix(m, sugar[m][i]), o[sugar[m][i]])
}
}
}
return this
}
registerMethods(['Element', 'Runner'], extension)
})
registerMethods(['Element', 'Runner'], {
// Let the user set the matrix directly
matrix: function (mat, b, c, d, e, f) {
// Act as a getter
if (mat == null) {
return new Matrix(this)
}
// Act as a setter, the user can pass a matrix or a set of numbers
return this.attr('transform', new Matrix(mat, b, c, d, e, f))
},
// Map rotation to transform
rotate: function (angle, cx, cy) {
return this.transform({ rotate: angle, ox: cx, oy: cy }, true)
},
// Map skew to transform
skew: function (x, y, cx, cy) {
return arguments.length === 1 || arguments.length === 3
? this.transform({ skew: x, ox: y, oy: cx }, true)
: this.transform({ skew: [x, y], ox: cx, oy: cy }, true)
},
shear: function (lam, cx, cy) {
return this.transform({ shear: lam, ox: cx, oy: cy }, true)
},
// Map scale to transform
scale: function (x, y, cx, cy) {
return arguments.length === 1 || arguments.length === 3
? this.transform({ scale: x, ox: y, oy: cx }, true)
: this.transform({ scale: [x, y], ox: cx, oy: cy }, true)
},
// Map translate to transform
translate: function (x, y) {
return this.transform({ translate: [x, y] }, true)
},
// Map relative translations to transform
relative: function (x, y) {
return this.transform({ relative: [x, y] }, true)
},
// Map flip to transform
flip: function (direction = 'both', origin = 'center') {
if ('xybothtrue'.indexOf(direction) === -1) {
origin = direction
direction = 'both'
}
return this.transform({ flip: direction, origin: origin }, true)
},
// Opacity
opacity: function (value) {
return this.attr('opacity', value)
}
})
registerMethods('radius', {
// Add x and y radius
radius: function (x, y = x) {
const type = (this._element || this).type
return type === 'radialGradient'
? this.attr('r', new SVGNumber(x))
: this.rx(x).ry(y)
}
})
registerMethods('Path', {
// Get path length
length: function () {
return this.node.getTotalLength()
},
// Get point at length
pointAt: function (length) {
return new Point(this.node.getPointAtLength(length))
}
})
registerMethods(['Element', 'Runner'], {
// Set font
font: function (a, v) {
if (typeof a === 'object') {
for (v in a) this.font(v, a[v])
return this
}
return a === 'leading'
? this.leading(v)
: a === 'anchor'
? this.attr('text-anchor', v)
: a === 'size' ||
a === 'family' ||
a === 'weight' ||
a === 'stretch' ||
a === 'variant' ||
a === 'style'
? this.attr('font-' + a, v)
: this.attr(a, v)
}
})
// Add events to elements
const methods = [
'click',
'dblclick',
'mousedown',
'mouseup',
'mouseover',
'mouseout',
'mousemove',
'mouseenter',
'mouseleave',
'touchstart',
'touchmove',
'touchleave',
'touchend',
'touchcancel',
'contextmenu',
'wheel',
'pointerdown',
'pointermove',
'pointerup',
'pointerleave',
'pointercancel'
].reduce(function (last, event) {
// add event to Element
const fn = function (f) {
if (f === null) {
this.off(event)
} else {
this.on(event, f)
}
return this
}
last[event] = fn
return last
}, {})
registerMethods('Element', methods)
|
