46 lines
1.1 KiB
JavaScript
46 lines
1.1 KiB
JavaScript
|
import {Polygon as SVGPolygon} from '@svgdotjs/svg.js';
|
||
|
|
import {Geo} from './Geo.js';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Creates an SVG trapezoid shape from Tldraw v2 JSON data.
|
||
|
|
*
|
||
|
|
* @class Trapezoid
|
||
|
|
* @extends {Geo}
|
||
|
|
*/
|
||
|
|
export class Trapezoid extends Geo {
|
||
|
|
/**
|
||
|
|
* Draws a trapezoid shape on the SVG canvas.
|
||
|
|
* @return {G} Returns the SVG group element containing the trapezoid.
|
||
|
|
*/
|
||
|
|
draw() {
|
||
|
|
const width = this.w;
|
||
|
|
const height = this.h + this.growY;
|
||
|
|
|
||
|
|
// Adjust this value as needed for the trapezoid
|
||
|
|
const topWidth = width * 0.6;
|
||
|
|
const xOffset = (width - topWidth) / 2;
|
||
|
|
|
||
|
|
// Shape begins from the upper left corner
|
||
|
|
const points = [
|
||
|
|
[xOffset, 0],
|
||
|
|
[xOffset + topWidth, 0],
|
||
|
|
[width, height],
|
||
|
|
[0, height],
|
||
|
|
].map((p) => p.join(',')).join(' ');
|
||
|
|
|
||
|
|
const trapezoidGroup = this.shapeGroup;
|
||
|
|
const trapezoid = new SVGPolygon({
|
||
|
|
points,
|
||
|
|
'stroke': this.shapeColor,
|
||
|
|
'stroke-width': this.thickness,
|
||
|
|
'style': this.dasharray,
|
||
|
|
});
|
||
|
|
|
||
|
|
this.setFill(trapezoid);
|
||
|
|
trapezoidGroup.add(trapezoid);
|
||
|
|
this.drawLabel(trapezoidGroup);
|
||
|
|
|
||
|
|
return trapezoidGroup;
|
||
|
|
}
|
||
|
|
}
|