44 lines
1002 B
JavaScript
44 lines
1002 B
JavaScript
|
import {Polygon as SVGPolygon} from '@svgdotjs/svg.js';
|
||
|
|
import {Geo} from './Geo.js';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Creates an SVG down-arrow shape.
|
||
|
|
*
|
||
|
|
* @class ArrowDown
|
||
|
|
* @extends {Geo}
|
||
|
|
*/
|
||
|
|
export class ArrowDown extends Geo {
|
||
|
|
/**
|
||
|
|
* Draws a down arrow shape on the SVG canvas.
|
||
|
|
* @return {G} Returns the SVG group element containing the down arrow.
|
||
|
|
*/
|
||
|
|
draw() {
|
||
|
|
const w = this.w;
|
||
|
|
const h = this.h + this.growY;
|
||
|
|
const ox = w * 0.16;
|
||
|
|
const oy = Math.min(w, h) * 0.38;
|
||
|
|
|
||
|
|
const points = [
|
||
|
|
[ox, 0],
|
||
|
|
[w - ox, 0],
|
||
|
|
[w - ox, h - oy],
|
||
|
|
[w, h - oy],
|
||
|
|
[w / 2, h],
|
||
|
|
[0, h - oy],
|
||
|
|
[ox, h - oy],
|
||
|
|
].map(([x, y]) => `${x},${y}`).join(' ');
|
||
|
|
|
||
|
|
const arrowGroup = this.shapeGroup;
|
||
|
|
const arrow = new SVGPolygon();
|
||
|
|
arrow.plot(points)
|
||
|
|
.stroke({color: this.shapeColor, width: this.thickness})
|
||
|
|
.style({dasharray: this.dasharray});
|
||
|
|
|
||
|
|
this.setFill(arrow);
|
||
|
|
arrowGroup.add(arrow);
|
||
|
|
this.drawLabel(arrowGroup);
|
||
|
|
|
||
|
|
return arrowGroup;
|
||
|
|
}
|
||
|
|
}
|