@antv/f2-wordcloud/es/index.js

F2 wordcloud extension

import { __assign, __extends } from "tslib";
import { jsx, Component } from '@antv/f2';
import WordCloud2 from './wordcloud2';
function checkSupported(ctx) {
  if (!ctx) {
    return false;
  }
  if (!ctx.getImageData) {
    return false;
  }
  return true;
}
var settings = {
  list: [],
  fontFamily: '',
  fontWeight: '',
  color: 'random-dark',
  fontSize: '140px',
  minSize: 0,
  clearCanvas: true,
  gridSize: 8,
  drawOutOfBound: false,
  minRotation: -Math.PI / 2,
  maxRotation: Math.PI / 2,
  rotationSteps: 0,
  shuffle: true,
  rotateRatio: 0.1,
  shape: 'circle',
  ellipticity: 0.65
};
var WordCloud = /** @class */function (_super) {
  __extends(WordCloud, _super);
  function WordCloud(props, context) {
    var _this = _super.call(this, props, context) || this;
    // Check if WordCloud can run on this browser
    _this.isSupported = checkSupported(context.ctx);
    return _this;
  }
  WordCloud.prototype.didMount = function () {
    var _this = this;
    var _a = this,
      context = _a.context,
      props = _a.props;
    var canvas = context.canvas;
    var maskShape = props.maskShape;
    if (!maskShape) {
      this.layoutWord();
      return;
    }
    canvas.on('rerender', function () {
      if (_this.state.list) return;
      _this.layoutWord();
    });
  };
  WordCloud.prototype.render = function () {
    if (!this.isSupported) {
      return null;
    }
    var _a = this,
      state = _a.state,
      props = _a.props;
    var list = state.list;
    if (list) {
      return jsx("group", null, list.map(function (item) {
        return jsx("text", {
          key: item.word,
          style: {
            x: item.x,
            y: item.y,
            text: item.word,
            fontFamily: item.fontFamily,
            fontSize: item.fontSize,
            fill: item.color,
            fontWeight: item.fontWeight,
            textBaseline: 'middle',
            textAlign: 'center',
            transform: "rotate(".concat(-item.rotate * 180 / Math.PI, ")")
          }
        });
      }));
    }
    var maskShape = props.maskShape;
    if (maskShape) {
      return maskShape;
    }
    return null;
  };
  // 计算布局
  WordCloud.prototype.layoutWord = function () {
    var _a = this,
      context = _a.context,
      props = _a.props,
      layout = _a.layout;
    var ctx = context.ctx,
      theme = context.theme,
      px2hd = context.px2hd;
    var width = layout.width,
      height = layout.height;
    var data = props.data,
      maskShape = props.maskShape,
      _b = props.fontSize,
      fontSize = _b === void 0 ? settings.fontSize : _b;
    if (!data || !data.length) return;
    var fontSizeRatio = px2hd(fontSize) / data[0].weight;
    var list = data.map(function (item) {
      return __assign(__assign({}, item), {
        weight: item.weight * fontSizeRatio
      });
    });
    var layoutList = WordCloud2(ctx, __assign(__assign(__assign({}, settings), {
      fontFamily: theme.fontFamily,
      list: list,
      width: width,
      height: height,
      clearCanvas: !maskShape
    }), props));
    this.setState({
      list: layoutList
    });
  };
  return WordCloud;
}(Component);
export default WordCloud;