@flexem/fc-gui 3.0.0-alpha.9 → 3.0.0-alpha.91

package/src/elements/ring-graph/ring-graph-element.ts

@@ -0,0 +1,230 @@
+import { path, Path } from 'd3-path';
+
+import { RingGraphModel } from '../../model/ring-graph/ring-graph.model';
+import { VariableCommunicator } from '../../communication/variable/variable-communicator';
+import { Localization } from '../../localization/localization.service';
+import { ReadableElement } from '../base/readable-element';
+import { RotationDirectionType } from '../../model/shared/rotation/rotation-direction-type';
+import { calculatePercent, degreesToRadians } from '../shared/math-utils';
+import { VariableUtil } from '../../utils/variable-util';
+import { VariableDefinition } from '../../communication/variable/variable-definition';
+import { VariableStore } from '../../config';
+import { PermissionChecker } from '../../service';
+import { forEach } from 'lodash';
+import { VariableState } from '../../communication';
+import { VariableValueType } from '../../model/shared/condition/variable-value-type';
+
+export class RingGraphElement extends ReadableElement {
+    private static DEFAULT_MIN_VALUE = 0;
+    private static DEFAULT_MAX_VALUE = 100;
+
+    protected readonly model: RingGraphModel;
+
+    private _barElement$: JQuery;
+    private _textElement$: JQuery;
+    private valueObj: any = {};
+    private isNeedUpdateScale = false;
+
+    public get readVariableName(): string {
+        if (!this.model.variableId) { return ''; }
+        if (!this.model.variableId.variableName || !this.model.variableId.variableName.name) {
+            return undefined;
+        }
+
+        const variable = new VariableDefinition(this.model.variableId.variableName.name, this.model.variableId.variableName.groupName,
+            this.model.variableId.dataSourceCode, this.model.variableId.variableName.variableVersion);
+        return VariableUtil.getConvertedVariableName(this.variableStore, variable);
+    }
+
+    public get minVariableName(): string {
+        if (!this.model.minValueType) { return undefined; }
+
+        if (!this.model.minVariable || !this.model.minVariable.name) {
+            return undefined;
+        }
+        const variable = new VariableDefinition(this.model.minVariable.name, this.model.minVariable.groupName,
+            this.model.minVariable.dataSourceCode, this.model.minVariable.variableVersion);
+        return VariableUtil.getConvertedVariableName(this.variableStore, variable);
+    }
+
+    public get maxVariableName(): string {
+        if (!this.model.maxValueType) { return undefined; }
+
+        if (!this.model.maxVariable || !this.model.maxVariable.name) {
+            return undefined;
+        }
+        const variable = new VariableDefinition(this.model.maxVariable.name, this.model.maxVariable.groupName,
+            this.model.maxVariable.dataSourceCode, this.model.maxVariable.variableVersion);
+        return VariableUtil.getConvertedVariableName(this.variableStore, variable);
+    }
+
+    constructor(element: HTMLElement, permissionChecker: PermissionChecker,
+        variableCommunicator: VariableCommunicator,
+        variableStore: VariableStore,
+        localization: Localization,
+        signalRAppId: string) {
+        super(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId);
+
+        if ((this.model.minValueType === VariableValueType.Constant && this.model.maxValueType === VariableValueType.Variable)
+            || this.model.maxValueType === VariableValueType.Constant && this.model.minValueType === VariableValueType.Variable) {
+            this.isNeedUpdateScale = true;
+            this.updateScale();
+            this.isNeedUpdateScale = false;
+        }
+        const el$ = $(element);
+        this._barElement$ = el$.find('path[data-id="barArc"]');
+        this._textElement$ = el$.find('text[data-id="pText"]');
+        setTimeout(() => {
+            this.initFrameNode();
+            this.changeStates();
+        });
+    }
+
+    private initFrameNode() {
+        const arcPath = Snap(this.$element[0]);
+        const b = arcPath.getBBox(true);
+        this.rootElement.append('rect').attr('id', 'StateFrame').attr('width', b.width).attr('height', b.height).attr('fill', 'transparent');
+    }
+
+    init(variableName: string) {
+        if (variableName) {
+            let hasVariable = false;
+            forEach(this.elementStates, elementState => {
+                if (elementState.variableName === variableName) {
+                    hasVariable = true;
+                }
+            });
+            if (!hasVariable && variableName === this.readVariableName) {
+                this.elementStates.push(new VariableState(variableName, undefined));
+            }
+        }
+    }
+
+    private updateValueObj(value: any, variableName: any) {
+
+        if (this.model.variableId?.variableName.name === variableName) {
+            this.isNeedUpdateScale = false;
+            this.valueObj.value = value;
+        }
+
+        if (this.model.minVariable?.name === variableName) {
+            this.isNeedUpdateScale = true;
+            this.valueObj.min = value;
+        }
+
+        if (this.model.maxVariable?.name === variableName) {
+            this.isNeedUpdateScale = true;
+            this.valueObj.max = value;
+        }
+    }
+
+    private updateScale() {
+        if (!this.isNeedUpdateScale) { return; }
+        const textElements = this.$element.find('g:first > text');
+        let min = this.model.minValueType ? this.valueObj.min : this.model.min;
+        let max = this.model.maxValueType ? this.valueObj.max : this.model.max;
+
+        min = Number(min);
+        max = Number(max);
+
+        if (isNaN(min) || isNaN(max)) {
+            min = RingGraphElement.DEFAULT_MIN_VALUE;
+            max = RingGraphElement.DEFAULT_MAX_VALUE;
+        }
+
+        const avgSacle = ((max - min) / this.model.masterDivisionNumber).toFixed(5);
+
+        for (let i = 0; i < textElements.length; i++) {
+            const text = textElements[i];
+            if (!text.innerHTML) { continue; }
+            let sacleValue = ((Number(avgSacle) * i) + min).toFixed(0);
+            // 整数位和小数位格式化；
+            if (this.model.fractionDigits > 0) {
+                sacleValue = (sacleValue / Math.pow(10, this.model.fractionDigits)).toFixed(this.model.fractionDigits);
+            }
+            if (!isNaN(sacleValue)) {
+                text.innerHTML = sacleValue;
+            }
+        }
+    }
+
+    protected updateVariableValue(value: number, variableName: any): void {
+        this.updateValueObj(value, variableName);
+        this.updateScale();
+        let min = this.model.minValueType ? this.valueObj.min : this.model.min;
+        let max = this.model.maxValueType ? this.valueObj.max : this.model.max;
+
+        min = Number(min);
+        max = Number(max);
+
+        if (isNaN(min) || isNaN(max)) {
+            min = RingGraphElement.DEFAULT_MIN_VALUE;
+            max = RingGraphElement.DEFAULT_MAX_VALUE;
+        }
+
+        const percent = calculatePercent(min, max, this.valueObj.value || 0);
+        this.updateBar(percent);
+        this._barElement$.attr('fill', this.getBarColor(value));
+        if (this.model.showPercentage) {
+            this._textElement$.text((percent * 100).toFixed(0) + '%');
+        }
+    }
+
+    private updateBar(percent: number) {
+        const model = this.model;
+        const outer = model.size.width / 2.0;
+        const rawStartAngle = model.arc.startAngle;
+        const rawEndAngle = model.arc.endAngle;
+        const sweepAngle = rawStartAngle === rawEndAngle ? 360 :
+            (rawStartAngle < rawEndAngle ? rawEndAngle - rawStartAngle : rawEndAngle + 360 - rawStartAngle);
+
+        const scale = model.scale;
+        const inner = outer * (scale / 100.0);
+
+        const arcPath = path();
+        switch (Number(model.direction)) {
+            case RotationDirectionType.ClockWise:
+                this.drawClockWiseArc(rawStartAngle, sweepAngle, percent, arcPath, outer, inner);
+                break;
+            case RotationDirectionType.ReverseClockWise:
+                this.drawAntiClockWiseArc(rawEndAngle, sweepAngle, percent, arcPath, outer, inner);
+                break;
+        }
+        arcPath.closePath();
+
+        this._barElement$.attr('d', arcPath.toString());
+    }
+
+    private getBarColor(value: number): string {
+        const model = this.model;
+        if (!model.enableAlarmRange) { return model.barFill; }
+        const alarmRange = model.alarmRange;
+        if (value > alarmRange.upper) {
+            return alarmRange.upperFill;
+        } else if (value < alarmRange.lower) {
+            return alarmRange.lowerFill;
+        } else {
+            return model.barFill;
+        }
+    }
+
+    private drawClockWiseArc(rawStartAngle: number, sweepAngle: number,
+        percent: number, arcPath: Path, outer: number, inner: number) {
+
+        const startRadians = degreesToRadians(rawStartAngle);
+        const endAngle = sweepAngle * percent + rawStartAngle;
+        const endRadians = degreesToRadians(endAngle);
+        arcPath.arc(outer, outer, outer, startRadians, endRadians);
+        arcPath.arc(outer, outer, inner, endRadians, startRadians, true);
+    }
+
+    private drawAntiClockWiseArc(rawEndAngle: number, sweepAngle: number,
+        percent: number, arcPath: Path, outer: number, inner: number) {
+
+        const startRadians = degreesToRadians(rawEndAngle);
+        const endAngle = rawEndAngle - sweepAngle * percent;
+        const endRadians = degreesToRadians(endAngle);
+        arcPath.arc(outer, outer, outer, startRadians, endRadians, true);
+        arcPath.arc(outer, outer, inner, endRadians, startRadians);
+    }
+}

package/src/elements/shared/graph/graph-state-element.ts

@@ -0,0 +1,121 @@
+import { GraphResult, GraphStore, GraphType } from '../../../config';
+import { LoggerService } from '../../../logger';
+import { Flicker, GraphSetting } from '../../../model';
+import { IndicatorLightFaultFlicker } from '../../../model/switch-indicator-light/indicator-light-fault-flicker';
+import { GraphUtil } from '../../../utils';
+
+export class GraphStateElement {
+
+    private graphs = new Map<number, GraphResult>();
+    private activeState = 0;
+    private imageElement: SVGImageElement;
+
+    private _element: SVGGElement;
+
+    get Element(): SVGElement {
+        return this._element;
+    }
+
+    private faultFlickerStatus = false;
+    private faultFlickerInterval = undefined;
+
+    constructor(private readonly graphSetting: GraphSetting,
+        private readonly width: number,
+        private readonly height: number,
+        private readonly graphStore: GraphStore,
+        private readonly logger: LoggerService,
+        private readonly version?: number,
+        private readonly faultFlickers?: IndicatorLightFaultFlicker[]) {
+        this._element = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    }
+
+    switchToState(stateId: number) {
+        this.activeState = stateId;
+        if (this.graphs.has(stateId)) {
+            const graph = this.graphs.get(stateId);
+            // 已经发出过图形请求，不再重复请求。
+            if (graph == null) { return; }
+            this.changeGraph(stateId, graph);
+        } else {
+            // 标记，防止重复请求图形。
+            this.graphs.set(stateId, null);
+            this.graphStore.getGraph(this.graphSetting.id, stateId,
+                GraphUtil.getExtendedStyle(this.graphSetting, stateId))
+                .subscribe(graphResult => {
+                    this.graphs.set(stateId, graphResult);
+                    if (this.activeState === stateId) {
+                        this.changeGraph(stateId, graphResult);
+                    }
+                });
+        }
+    }
+
+    private changeGraph(stateId: number, graphResult: GraphResult) {
+        if (!graphResult.failed) {
+            const graph = graphResult.graph;
+            switch (graph.graphType) {
+                case GraphType.Image:
+                case GraphType.SVG:
+                    const imageElement = this.getImageElement();
+                    imageElement.setAttributeNS('http://www.w3.org/1999/xlink', 'href', graph.source);
+                    this.doFaultFlicker(imageElement, stateId);
+                    break;
+                default:
+                    this.logger.error(new Error(`Unknown graph ${graph.graphType}.`));
+                    this.removeImageElement();
+                    break;
+            }
+        } else {
+            this.removeImageElement();
+        }
+    }
+
+    private getImageElement(): SVGImageElement {
+        if (!this.imageElement) {
+            this.imageElement = document.createElementNS('http://www.w3.org/2000/svg', 'image');
+            this.imageElement.setAttribute('width', this.width + '');
+            this.imageElement.setAttribute('height', this.height + '');
+            this.imageElement.setAttribute('fill', 'none');
+            this.imageElement.setAttribute('preserveAspectRatio', 'none');
+            this.imageElement.setAttribute('crossorigin', 'anonymous');
+            this._element.appendChild(this.imageElement);
+        }
+        return this.imageElement;
+    }
+
+    private removeImageElement() {
+        if (this.imageElement) {
+            this._element.removeChild(this.imageElement);
+            delete this.imageElement;
+        }
+    }
+
+    private doFaultFlicker(imageElement: SVGImageElement, stateId: number) {
+        if (this.version > 3 && this.faultFlickers) {
+            this.clearFlickerInterval(imageElement);
+            const faultFlicker = this.faultFlickers.find(t => t.id === stateId);
+            if (faultFlicker && faultFlicker.faultFlicker) {
+                if (faultFlicker.faultFlicker.flicker === Flicker.Image) {
+                    this.faultFlickerInterval = setInterval(() => {
+                        if (this.faultFlickerStatus) {
+                            imageElement.setAttributeNS(null, 'display', 'block');
+                            this.faultFlickerStatus = false;
+                        } else {
+                            imageElement.setAttributeNS(null, 'display', 'none');
+                            this.faultFlickerStatus = true;
+                        }
+                    }, faultFlicker.faultFlicker.frequency * 500);
+                }
+            }
+        }
+    }
+
+    private clearFlickerInterval(imageElement: SVGImageElement) {
+        if (this.faultFlickerInterval) {
+            clearInterval(this.faultFlickerInterval);
+            if (this.faultFlickerStatus) {
+                imageElement.setAttributeNS(null, 'display', 'block');
+            }
+        }
+    }
+}

package/src/elements/shared/math-utils.ts

@@ -0,0 +1,14 @@
+
+export function calculatePercent(min: number, max: number, value: number): number {
+    if (value > max) {
+        return 1;
+    } else if (value < min) {
+        return 0;
+    } else {
+        return (value - min) / (max - min);
+    }
+}
+
+export function degreesToRadians(degrees: number): number {
+    return degrees * (Math.PI / 180);
+}

package/src/elements/shared/text/text-element.ts

@@ -0,0 +1,88 @@
+import { Font } from '../../../model';
+import { isNil } from 'lodash';
+
+export class TextElementModal {
+
+    private _element: SVGGElement;
+
+    get Element(): SVGElement {
+        return this._element;
+    }
+
+    constructor(content: string, font: Font, width: number, height: number, isVariableText?: boolean) {
+        if (/iPhone|iPod/i.test(navigator.userAgent)) {
+            width += 10;
+        }
+        this._element = this.getforeignObjectElement(width, height);
+        this._element.innerHTML = '';
+        const text = this.createNewForeignObjectText(content, font, width, height, isVariableText);
+        this._element.appendChild(text);
+    }
+
+    private getforeignObjectElement(width, height): SVGForeignObjectElement {
+        const textElement = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
+        textElement.setAttribute('width', width.toString());
+        textElement.setAttribute('height', height.toString());
+        return textElement;
+    }
+
+    private createNewForeignObjectText(content: string, font: Font, width: number, height: number, isVariableText?: boolean) {
+        if (font && !font.fontFamily.includes(',msyh')) {
+            font.fontFamily += ',msyh';
+        }
+        const bodyDiv = document.createElement('div');
+        const textAlign = font.textAlign ? font.textAlign : 'center';
+        bodyDiv.style.cssText = `user-select: none;text-align: ${textAlign};display: table-cell;vertical-align: middle;`;
+        if (isNil(content)) {
+            content = '';
+        }
+        let textArray = content.toString().split('\n');
+        textArray = textArray.map(item => {
+            return item.toString().replace(/\s/g, ' ');
+        });
+        const fragment = document.createDocumentFragment();
+        for (let index = 0; index < textArray.length; index++) {
+            const textDiv = document.createElement('div');
+            textDiv.className = 'text-list';
+            const innerHTML = textArray[index] ? textArray[index] : '&nbsp;';
+            let fontString = '';
+            if (font.isItalic) {
+                fontString += 'italic ';
+            }
+            if (font.isBold) {
+                fontString += 'bold ';
+            }
+            let lineHeight = 0;
+
+            // chrome支持可显示最小字体大小为12px, 更小字体通过缩放实现
+            const minFontSize = 12;
+            lineHeight = parseInt(font.fontSize, 10) + 5;
+            fontString += font.fontSize + '/' + lineHeight.toString() + 'px ' + font.fontFamily;
+            textDiv.style.cssText = `color: ${font.color};word-break: break-all;font: ${fontString};`;
+            if (font.isUnderline) {
+                textDiv.style.textDecoration = 'underline';
+            }
+            const spanText = document.createElement('span');
+            spanText.style.cssText = `
+                display: contents;
+                transform: scale(${parseInt(font.fontSize, 10) > minFontSize ? 1 : parseInt(font.fontSize, 10) / minFontSize});
+                width: 100%;
+                height: 100%;
+            `;
+            spanText.innerHTML = innerHTML;
+            textDiv.appendChild(spanText);
+            fragment.appendChild(textDiv);
+        }
+        bodyDiv.appendChild(fragment);
+        const contentDiv = document.createElement('div');
+        contentDiv.style.cssText = 'display: table;width: 100%;height: 100%;';
+        contentDiv.appendChild(bodyDiv);
+        const containerDiv = document.createElement('div');
+        containerDiv.style.cssText = `overflow: hidden;width: ${width.toString() + 'px'};height: ${height.toString() + 'px'};`;
+        if (isVariableText) {
+            containerDiv.style.paddingRight = '8px';
+        }
+        containerDiv.appendChild(contentDiv);
+        return containerDiv;
+    }
+}

package/src/elements/shared/text/text-state-element.ts

@@ -0,0 +1,150 @@
+import { LoggerService } from '../../../logger';
+import { Flicker, Font } from '../../../model';
+import { IndicatorLightFaultFlicker } from '../../../model/switch-indicator-light/indicator-light-fault-flicker';
+import { TextState } from './text-state.model';
+import { isNil } from 'lodash';
+
+export class TextStateElement {
+
+    private textElement: SVGForeignObjectElement;
+    private _element: SVGGElement;
+
+    get Element(): SVGElement {
+        return this._element;
+    }
+
+    private faultFlickerStatus = false;
+    private faultFlickerInterval = undefined;
+
+    constructor(private readonly textStates: TextState[],
+        private width: number,
+        private readonly height: number,
+        private readonly logger: LoggerService,
+        private readonly version?: number,
+        private readonly faultFlickers?: IndicatorLightFaultFlicker[]) {
+        this._element = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    }
+
+    switchToState(stateId: number) {
+        const textState = this.textStates.find(t => t.id === stateId);
+        if (textState === undefined) {
+            this.removeForeignObjectlement();
+            this.logger.debug(`Can not find text state:${stateId}.`);
+            return;
+        }
+        const content = textState.text.content;
+        if (content === '') {
+            this.removeForeignObjectlement();
+            return;
+        }
+        const font = textState.text.font;
+        if (!font) {
+            this.removeForeignObjectlement();
+            this.logger.debug('The font is undefined.');
+            return;
+        }
+        const foreignObjectElement = this.getforeignObjectElement();
+        foreignObjectElement.innerHTML = '';
+        const text = this.createNewForeignObjectText(content, font);
+        foreignObjectElement.appendChild(text);
+        this.doFaultFlicker(foreignObjectElement, stateId);
+    }
+
+    private getforeignObjectElement(): SVGForeignObjectElement {
+        if (!this.textElement) {
+            this.textElement = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
+            this.textElement.setAttribute('width', this.width.toString());
+            this.textElement.setAttribute('height', this.height.toString());
+            this._element.appendChild(this.textElement);
+        }
+        return this.textElement;
+    }
+
+    private createNewForeignObjectText(content: string, font: Font) {
+        if (font && !font.fontFamily.includes(',msyh')) {
+            font.fontFamily += ',msyh';
+        }
+        const bodyDiv = document.createElement('div');
+        bodyDiv.style.textAlign = font.textAlign ? font.textAlign : 'center';
+        bodyDiv.style.userSelect = 'none';
+        bodyDiv.style.display = 'table-cell';
+        bodyDiv.style.verticalAlign = 'middle';
+        if (isNil(content)) {
+            content = '';
+        }
+        let textArray = content.toString().split('\n');
+        textArray = textArray.map(item => {
+            return item.toString().replace(/\s/g, ' ');
+        });
+        const fragment = document.createDocumentFragment();
+        for (let index = 0; index < textArray.length; index++) {
+            const textDiv = document.createElement('div');
+            textDiv.innerHTML = textArray[index] ? textArray[index] : '&nbsp;';
+            let fontString = '';
+            if (font.isItalic) {
+                fontString += 'italic ';
+            }
+            if (font.isBold) {
+                fontString += 'bold ';
+            }
+            textDiv.style.wordBreak = 'break-word';
+            textDiv.style.color = font.color;
+            let lineHeight = 0;
+            lineHeight = parseInt(font.fontSize, 10) + 5;
+            fontString += font.fontSize + 'px/' + lineHeight + 'px ' + font.fontFamily;
+            textDiv.style.font = fontString;
+            if (font.isUnderline) {
+                textDiv.style.textDecoration = 'underline';
+            }
+            fragment.appendChild(textDiv);
+        }
+        bodyDiv.appendChild(fragment);
+        const contentDiv = document.createElement('div');
+        contentDiv.style.display = 'table';
+        contentDiv.style.width = '100%';
+        contentDiv.style.height = '100%';
+        contentDiv.appendChild(bodyDiv);
+        const containerDiv = document.createElement('div');
+        containerDiv.style.overflow = 'hidden';
+        containerDiv.style.width = this.width.toString() + 'px';
+        containerDiv.style.height = this.height.toString() + 'px';
+        containerDiv.appendChild(contentDiv);
+        return containerDiv;
+    }
+
+    private removeForeignObjectlement() {
+        if (this.textElement) {
+            this._element.removeChild(this.textElement);
+            delete this.textElement;
+        }
+    }
+
+    private doFaultFlicker(textElement: SVGForeignObjectElement, stateId: number) {
+        if (this.version > 3 && this.faultFlickers) {
+            this.clearFlickerInterval(textElement);
+            const faultFlicker = this.faultFlickers.find(t => t.id === stateId);
+            if (faultFlicker && faultFlicker.faultFlicker) {
+                if (faultFlicker.faultFlicker.flicker === Flicker.Label) {
+                    this.faultFlickerInterval = setInterval(() => {
+                        if (this.faultFlickerStatus) {
+                            textElement.setAttributeNS(null, 'display', 'block');
+                            this.faultFlickerStatus = false;
+                        } else {
+                            textElement.setAttributeNS(null, 'display', 'none');
+                            this.faultFlickerStatus = true;
+                        }
+                    }, faultFlicker.faultFlicker.frequency * 500);
+                }
+            }
+        }
+    }
+
+    private clearFlickerInterval(textElement: SVGForeignObjectElement) {
+        if (this.faultFlickerInterval) {
+            clearInterval(this.faultFlickerInterval);
+            if (this.faultFlickerStatus) {
+                textElement.setAttributeNS(null, 'display', 'block');
+            }
+        }
+    }
+}

package/src/elements/shared/text/text-state.model.ts

@@ -0,0 +1,6 @@
+import { Text } from '../../../model';
+
+export interface TextState {
+    readonly id: number;
+    readonly text: Text;
+}

package/src/elements/shared/text/text-utils.ts

@@ -0,0 +1,45 @@
+import { Font } from '../../../model';
+
+export class TextUtils {
+    static setText(textElement: SVGTextElement, content: string, font: Font, width: number, height: number, cursor = 'hand') {
+        this.alignText(textElement, font.textAlign, width, height);
+        textElement.setAttribute('cursor', cursor);
+        textElement.setAttribute('alignment-baseline', 'central');
+        textElement.setAttribute('font-family', font.fontFamily);
+        textElement.setAttribute('font-size', font.fontSize + '');
+        textElement.setAttribute('fill', font.color);
+        if (font.isBold) {
+            textElement.setAttribute('font-weight', 'bold');
+        } else {
+            textElement.removeAttribute('font-weight');
+        }
+        if (font.isItalic) {
+            textElement.setAttribute('font-style', 'italic');
+        } else {
+            textElement.removeAttribute('font-style');
+        }
+        if (font.isUnderline) {
+            textElement.setAttribute('text-decoration', 'underline');
+        } else {
+            textElement.removeAttribute('text-decoration');
+        }
+        textElement.textContent = content;
+    }
+
+    private static alignText(textElement: SVGTextElement, align: string, width: number, height: number) {
+        switch (align) {
+            case 'right':
+                textElement.setAttribute('text-anchor', 'end');
+                textElement.setAttribute('transform', `translate(${width},${height / 2})`);
+                break;
+            case 'left':
+                textElement.setAttribute('text-anchor', 'start');
+                textElement.setAttribute('transform', `translate(0,${height / 2})`);
+                break;
+            default:
+                textElement.setAttribute('text-anchor', 'middle');
+                textElement.setAttribute('transform', `translate(${width / 2},${height / 2})`);
+                break;
+        }
+    }
+}