3 * Created by onvelocity on 2/10/16.
6 export default class PathBuilder
{
12 static archFlags(override
) {
13 return Object
.assign({xAxisRotation
: 0, largeArcFlag
: 0, sweepFlag
: 0}, override
);
17 this.path
.push({x
: x
, y
: y
, cmd
: 'M', info
: info
});
21 m(dx
, dy
, info
= {}) {
22 this.path
.push({dx
: dx
, dy
: dy
, cmd
: 'm', info
: info
});
27 this.path
.push({x
: x
, y
: y
, cmd
: 'L', info
: info
});
31 l(dx
, dy
, info
= {}) {
32 this.path
.push({dx
: dx
, dy
: dy
, cmd
: 'l', info
: info
});
37 this.path
.push({x
: x
, cmd
: 'H', info
: info
});
42 this.path
.push({dx
: dx
, cmd
: 'h', info
: info
});
47 this.path
.push({y
: y
, cmd
: 'V', info
: info
});
52 this.path
.push({dy
: dy
, cmd
: 'v', info
: info
});
56 C(x1
, y1
, x2
, y2
, x
, y
, info
= {}) {
57 this.path
.push({x1
: x1
, y1
: y1
, x2
: x2
, y2
: y2
, x
: x
, y
: y
, cmd
: 'C', info
: info
});
61 c(dx1
, dy1
, dx2
, dy2
, dx
, dy
, info
= {}) {
62 this.path
.push({dx1
: dx1
, dy1
: dy1
, dx2
: dx2
, dy2
: dy2
, dx
: dx
, dy
: dy
, cmd
: 'c', info
: info
});
66 Q(x1
, y1
, x
, y
, info
= {}) {
67 this.path
.push({x1
: x1
, y1
: y1
, x
: x
, y
: y
, cmd
: 'Q', info
: info
});
71 q(x1
, y1
, x
, y
, info
= {}) {
72 this.path
.push({x1
: x1
, y1
: y1
, x
: x
, y
: y
, cmd
: 'q', info
: info
});
77 this.path
.push({x
: x
, y
: y
, cmd
: 'T', info
: info
});
81 A (rx
, ry
, x
, y
, info
= {xAxisRotation
: 0, largeArcFlag
: 0, sweepFlag
: 0}) {
82 info
= PathBuilder
.archFlags(info
);
83 this.path
.push({rx
: rx
, ry
: ry
, 'x-axis-rotation': info
.xAxisRotation
, 'large-arc-flag': info
.largeArcFlag
, 'sweep-flag': info
.sweepFlag
, x
: x
, y
: y
, cmd
: 'A', info
: info
});
87 S(x2
, y2
, x
, y
, info
= {}) {
88 this.path
.push({x2
: x2
, y2
: y2
, x
: x
, y
: y
, cmd
: 'S', info
: info
});
93 this.path
.push({x
: x
, info
: info
});
98 this.path
.push({dx
: dx
, info
: info
});
103 this.path
.push({y
: y
, info
: info
});
108 this.path
.push({dy
: dy
, info
: info
});
113 this.path
.push({cmd
: 'Z'});
118 return this.path
[this.path
.length
- 1];
121 findPrevious(filter
) {
122 return this.path
.splice().reverse().reduce((r
, d
) => {
133 if (this.path
.length
< 3) {
136 const last
= this.path
.pop();
137 this.path
.splice(this.length
- 2, 0, last
);
141 concat(pathBuilder
) {
142 this.path
= this.path
.filter(d
=> d
.cmd
!== 'Z').concat(pathBuilder
);
147 return this.path
.reduce((r
, d
) => {
148 return r
+ ' ' + d
.cmd
+ ' ' + Object
.keys(d
).filter(k
=> !(k
== 'cmd' || k
=== 'info')).map(k
=> d
[k
]).reduce((r
, val
) => r
+ ' ' + val
, '');
149 }, '').replace(/\s+/g, ' ').trim();
153 return this.path
.length
;
156 static descriptorPath(borderRadius
= 20, height
= 55, width
= 250) {
157 const path
= new PathBuilder();
158 borderRadius
= Math
.max(0, borderRadius
);
159 width
= Math
.max(borderRadius
, width
) - borderRadius
;
160 height
= Math
.max(borderRadius
, height
) - (borderRadius
);
161 const iconWidthHeight
= 40;
164 .L(width
, 0).C(width
, 0, width
+ borderRadius
, 0, width
+ borderRadius
, borderRadius
)
166 .L(width
+ borderRadius
, height
).C(width
+ borderRadius
, height
, width
+ borderRadius
, height
+ borderRadius
, width
, height
+ borderRadius
)
168 .L(0, height
+ borderRadius
).C(0, height
+ borderRadius
, 0 - borderRadius
, height
+ borderRadius
, 0 - borderRadius
, height
)
170 .L(0 - borderRadius
, 0 + borderRadius
).C(0 - borderRadius
, 0 + borderRadius
, 0 - borderRadius
, 0, 0, 0)
172 //.L(iconWidthHeight, 0).L(iconWidthHeight, iconWidthHeight + (borderRadius + height - iconWidthHeight))
174 //.L(iconWidthHeight, iconWidthHeight).L(0 - borderRadius, iconWidthHeight);