wisemapping-frontend/packages/web2d/src/components/peer/svg/TextPeer.js

/*
 *    Copyright [2021] [wisemapping]
 *
 *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
 *   It is basically the Apache License, Version 2.0 (the "License") plus the
 *   "powered by wisemapping" text requirement on every single page;
 *   you may not use this file except in compliance with the License.
 *   You may obtain a copy of the license at
 *
 *       http://www.wisemapping.org/license
 *
 *   Unless required by applicable law or agreed to in writing, software
 *   distributed under the License is distributed on an "AS IS" BASIS,
 *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *   See the License for the specific language governing permissions and
 *   limitations under the License.
 */
import { $defined } from '@wisemapping/core-js';
import ElementPeer from './ElementPeer';
import { getPosition } from '../utils/DomUtils';
import Toolkit from '../../Toolkit';

class TextPeer extends ElementPeer {
  constructor(fontPeer) {
    const svgElement = window.document.createElementNS(ElementPeer.svgNamespace, 'text');
    super(svgElement);
    this._position = { x: 0, y: 0 };
    this._font = fontPeer;
  }

  append(element) {
    this._native.appendChild(element._native);
  }

  setTextAlignment(align) {
    this._textAlign = align;
  }

  getTextAlignment() {
    return $defined(this._textAlign) ? this._textAlign : 'left';
  }

  setText(text) {
    // Remove all previous nodes ...
    while (this._native.firstChild) {
      this._native.removeChild(this._native.firstChild);
    }

    this._text = text;
    if (text) {
      const lines = text.split('\n');
      const me = this;
      lines.forEach((line) => {
        const tspan = window.document.createElementNS(ElementPeer.svgNamespace, 'tspan');
        tspan.setAttribute('dy', '1em');
        tspan.setAttribute('x', me.getPosition().x);

        tspan.textContent = line.length === 0 ? ' ' : line;
        me._native.appendChild(tspan);
      });
    }
  }

  getText() {
    return this._text;
  }

  setPosition(x, y) {
    this._position = { x, y };
    this._native.setAttribute('y', y);
    this._native.setAttribute('x', x);

    // tspan must be positioned manually.
    Array.from(this._native.querySelectorAll('tspan')).forEach((element) => {
      element.setAttribute('x', x);
    });
  }

  getPosition() {
    return this._position;
  }

  getNativePosition() {
    return getPosition(this._native);
  }

  setFont(fontName, size, style, weight) {
    if ($defined(fontName)) {
      this._font = Toolkit.createFontByName(fontName);
    }

    if ($defined(style)) {
      this._font.setStyle(style);
    }
    if ($defined(weight)) {
      this._font.setWeight(weight);
    }
    if ($defined(size)) {
      this._font.setSize(size);
    }
    this._updateFontStyle();
  }

  _updateFontStyle() {
    this._native.setAttribute('font-family', this._font.getFontName());
    this._native.setAttribute('font-size', this._font.getGraphSize());
    this._native.setAttribute('font-style', this._font.getStyle());
    this._native.setAttribute('font-weight', this._font.getWeight());
  }

  setColor(color) {
    this._native.setAttribute('fill', color);
  }

  getColor() {
    return this._native.getAttribute('fill');
  }

  setTextSize(size) {
    this._font.setSize(size);
    this._updateFontStyle();
  }

  setContentSize(width, height) {
    this._native.xTextSize = `${width.toFixed(1)},${height.toFixed(1)}`;
  }

  setStyle(style) {
    this._font.setStyle(style);
    this._updateFontStyle();
  }

  setWeight(weight) {
    this._font.setWeight(weight);
    this._updateFontStyle();
  }

  setFontName(fontName) {
    const oldFont = this._font;
    this._font = Toolkit.createFontByName(fontName);
    this._font.setSize(oldFont.getSize());
    this._font.setStyle(oldFont.getStyle());
    this._font.setWeight(oldFont.getWeight());
    this._updateFontStyle();
  }

  getFontStyle() {
    return {
      fontFamily: this._font.getFontName(),
      size: parseInt(this._font.getSize(), 10),
      style: this._font.getStyle(),
      weight: this._font.getWeight(),
    };
  }

  setSize(size) {
    this._font.setSize(size);
    this._updateFontStyle();
  }

  getWidth() {
    let computedWidth = this._native.getBBox().width;
    if (computedWidth === 0) {
      const bbox = this._native.getBBox();
      computedWidth = bbox.width;
    }

    let width = parseInt(computedWidth, 10);
    width += this._font.getWidthMargin();
    return width;
  }

  getHeight() {
    const computedHeight = this._native.getBBox().height;
    return parseInt(computedHeight, 10);
  }

  getHtmlFontSize(scale) {
    return this._font.getHtmlSize(scale);
  }
}

export default TextPeer;