45 lines
1.2 KiB
JavaScript
45 lines
1.2 KiB
JavaScript
|
import {Polygon as SVGPolygon} from '@svgdotjs/svg.js';
|
||
|
|
import {Geo} from './Geo.js';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Creates an SVG rhombus shape from Tldraw v2 JSON data.
|
||
|
|
*
|
||
|
|
* @class Rhombus
|
||
|
|
* @extends {Geo}
|
||
|
|
*/
|
||
|
|
export class Rhombus extends Geo {
|
||
|
|
/**
|
||
|
|
* Draws a rhombus shape on the SVG canvas.
|
||
|
|
* @return {G} Returns the SVG group element containing the rhombus.
|
||
|
|
*/
|
||
|
|
draw() {
|
||
|
|
const width = this.w;
|
||
|
|
const height = this.h + this.growY;
|
||
|
|
|
||
|
|
// Internal angle between adjacent sides varies with width and height
|
||
|
|
const offset = Math.min(width * 0.38, height * 0.38);
|
||
|
|
|
||
|
|
// Coordinates for the four vertices of the rhombus
|
||
|
|
const points = [
|
||
|
|
[offset, 0], // Top left vertex
|
||
|
|
[width, 0], // Top right vertex
|
||
|
|
[width - offset, height], // Bottom right vertex
|
||
|
|
[0, height], // Bottom left vertex
|
||
|
|
].map((p) => p.join(',')).join(' ');
|
||
|
|
|
||
|
|
const rhombusGroup = this.shapeGroup;
|
||
|
|
const rhombus = new SVGPolygon({
|
||
|
|
points,
|
||
|
|
'stroke': this.shapeColor,
|
||
|
|
'stroke-width': this.thickness,
|
||
|
|
'style': this.dasharray,
|
||
|
|
});
|
||
|
|
|
||
|
|
this.setFill(rhombus);
|
||
|
|
rhombusGroup.add(rhombus);
|
||
|
|
this.drawLabel(rhombusGroup);
|
||
|
|
|
||
|
|
return rhombusGroup;
|
||
|
|
}
|
||
|
|
}
|