60 lines
1.8 KiB
JavaScript
60 lines
1.8 KiB
JavaScript
|
import {Text} from '@svgdotjs/svg.js';
|
||
|
|
import {Shape} from './Shape.js';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Draws the text shape on the SVG canvas, aligning and styling it
|
||
|
|
* based on the provided properties.
|
||
|
|
* @override
|
||
|
|
* @return {G} The SVG group element containing the text element.
|
||
|
|
*/
|
||
|
|
export class TextShape extends Shape {
|
||
|
|
/**
|
||
|
|
* Constructs a new TextShape instance with the given parameters.
|
||
|
|
* Inherits from Shape and initializes text-specific properties.
|
||
|
|
*
|
||
|
|
* @param {Object} params - The configuration object for the text shape.
|
||
|
|
* @param {string} [params.text=""] - The text content for the shape.
|
||
|
|
* @param {string} [params.align] - The horizontal text alignment.
|
||
|
|
* @param {number} [params.w] - The width of the shape.
|
||
|
|
* @param {number} [params.h] - The height of the shape.
|
||
|
|
* @param {string} [params.font] - The font family for the text.
|
||
|
|
*/
|
||
|
|
constructor(params) {
|
||
|
|
super(params);
|
||
|
|
this.text = this.props?.text || '';
|
||
|
|
this.align = this.props?.align;
|
||
|
|
this.w = this.props?.w;
|
||
|
|
this.h = this.props?.h;
|
||
|
|
this.fontSize = Shape.determineFontSize(this.size);
|
||
|
|
this.fontFamily = Shape.determineFontFromFamily(this.props?.font);
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Draws the text shape and adds it to the SVG.
|
||
|
|
* Overrides the placeholder draw method in the Shape base class.
|
||
|
|
* @override
|
||
|
|
* @method draw
|
||
|
|
* @return {G} An SVG group element containing the text.
|
||
|
|
*/
|
||
|
|
draw() {
|
||
|
|
const x = Shape.alignHorizontally(this.align, this.w);
|
||
|
|
const y = 0;
|
||
|
|
|
||
|
|
const textGroup = this.shapeGroup;
|
||
|
|
const textElement = new Text()
|
||
|
|
.text(this.text)
|
||
|
|
.move(x, y)
|
||
|
|
.font({
|
||
|
|
'family': this.fontFamily,
|
||
|
|
'size': this.fontSize,
|
||
|
|
'anchor': this.align,
|
||
|
|
'alignment-baseline': 'middle',
|
||
|
|
})
|
||
|
|
.fill(this.shapeColor);
|
||
|
|
|
||
|
|
textGroup.add(textElement);
|
||
|
|
|
||
|
|
return textGroup;
|
||
|
|
}
|
||
|
|
}
|