How to use the @antv/dom-util.getOuterWidth function in @antv/dom-util

To help you get started, we’ve selected a few @antv/dom-util examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github antvis / G2 / packages / component / src / legend / category / html.ts View on Github external
const legendContainerWidth = this.getWidth(); // legend 容器的宽度
      // const titleHeight = this.get('_titleContainer') ?
      // Util.getOuterHeight(this.get('_titleContainer')) : 0;  // Legend 标题的高度
      const paginationWidth = domUtil.getOuterWidth(paginationDom); // 分页器的宽度
      const itemGroupContainerWidth = legendContainerWidth - paginationWidth - 40; // 获取图例项容器的可视宽度
      const itemGroupContainerOffsetWidth = itemGroupContainer.offsetWidth; // 获取图例项实际的宽度

      // 剪切区域的样式设置
      const clipContainer = this.get('_clipContainer');
      domUtil.modifyCSS(clipContainer, {
        maxWidth: `${itemGroupContainerWidth}px`,
        overflow: 'hidden',
      });

      const pageSize = Math.ceil(itemGroupContainerOffsetWidth / itemGroupContainerWidth); // 计算页数
      const itemWidth = domUtil.getOuterWidth(itemGroupContainer.childNodes[0]); // 获取每个图例项的宽度
      // const onePageCount = Math.floor(itemGroupContainerWidth / itemWidth); // 计算一页可完整显示的图例项个数
      const deltaWidth = itemGroupContainerWidth; // 每页滚动的宽度

      const currentPageNum = _findNodeByClass(paginationDom, 'current-page-number');
      const totalPageNum = _findNodeByClass(paginationDom, 'total-page-number');
      const prePageButton = _findNodeByClass(paginationDom, 'pre-page');
      const nextPageButton = _findNodeByClass(paginationDom, 'next-page');

      totalPageNum.innerHTML = pageSize;

      const paginationCfg = Util.deepMix({}, DEFAULT_THEME.pagination, pagination);
      const activeStyle = {
        cursor: 'pointer',
        border: `${paginationCfg.activeColor} solid`,
        borderWidth: '2px 2px 0 0',
        width: `${paginationCfg.arrowSize}px`,
github antvis / G2 / packages / component / src / annotation / html.ts View on Github external
private setDomPosition(parentDom: HTMLElement, childDom: HTMLElement, point: Point) {
    const alignX = this.get('alignX');
    const alignY = this.get('alignY');
    const domWidth = domUtil.getOuterWidth(childDom);
    const domHeight = domUtil.getOuterHeight(childDom);

    const position: Point = {
      x: point.x, // alignX = left
      y: point.y, // alignY = top
    };

    if (alignX === 'middle') {
      position.x -= Math.round(domWidth / 2);
    } else if (alignX === 'right') {
      position.x -= Math.round(domWidth);
    }

    if (alignY === 'middle') {
      position.y -= Math.round(domHeight / 2);
    } else if (alignY === 'bottom') {
github antvis / G2 / packages / component / src / legend / category / html.ts View on Github external
`; // 分页器结构模板,目前不允许自定义
    if (pagination && legendContainer.scrollWidth > legendContainer.offsetWidth) {
      // 满足分页条件
      domUtil.modifyCSS(legendContainer, {
        overflow: 'hidden',
        width: `${this.get('maxWidth')}px`,
      }); // 如果允许分页,则禁止滚动
      const paginationDom = domUtil.createDom(paginationDomStr);
      legendContainer.appendChild(paginationDom);

      const legendContainerWidth = this.getWidth(); // legend 容器的宽度
      // const titleHeight = this.get('_titleContainer') ?
      // Util.getOuterHeight(this.get('_titleContainer')) : 0;  // Legend 标题的高度
      const paginationWidth = domUtil.getOuterWidth(paginationDom); // 分页器的宽度
      const itemGroupContainerWidth = legendContainerWidth - paginationWidth - 40; // 获取图例项容器的可视宽度
      const itemGroupContainerOffsetWidth = itemGroupContainer.offsetWidth; // 获取图例项实际的宽度

      // 剪切区域的样式设置
      const clipContainer = this.get('_clipContainer');
      domUtil.modifyCSS(clipContainer, {
        maxWidth: `${itemGroupContainerWidth}px`,
        overflow: 'hidden',
      });

      const pageSize = Math.ceil(itemGroupContainerOffsetWidth / itemGroupContainerWidth); // 计算页数
      const itemWidth = domUtil.getOuterWidth(itemGroupContainer.childNodes[0]); // 获取每个图例项的宽度
      // const onePageCount = Math.floor(itemGroupContainerWidth / itemWidth); // 计算一页可完整显示的图例项个数
      const deltaWidth = itemGroupContainerWidth; // 每页滚动的宽度

      const currentPageNum = _findNodeByClass(paginationDom, 'current-page-number');
github antvis / G2 / packages / component / src / label / base.ts View on Github external
public _setCustomPosition(cfg: any, htmlDom: any) {
    const textAlign = cfg.textAlign || 'left';
    let top = cfg.y;
    let left = cfg.x;
    const width = domUtil.getOuterWidth(htmlDom);
    const height = domUtil.getOuterHeight(htmlDom);

    top = top - height / 2;
    if (textAlign === 'center') {
      left = left - width / 2;
    } else if (textAlign === 'right') {
      left = left - width;
    }

    htmlDom.style.top = `${parseInt(top, 10)}px`;
    htmlDom.style.left = `${parseInt(left, 10)}px`;
  }
github antvis / G2 / packages / component / src / legend / category / html.ts View on Github external
public getWidth(): number {
    const container = this.get('_legendContainer');
    return domUtil.getOuterWidth(container);
  }