measureText()

I am trying to surround a Konva.Text with a Konva.Rect, which requires that I measure the text before drawing the rectangle. How would you recommend that I accomplish this?

Currently it requires two passes with React to first render the Text and then render the Rectangle, since I can’t access the underlying Konva.Text element before it is rendered.

[lavrton]

@blueberryfan Something like this:

class MyText extends React.Component {
  componentDidMount() {
    // do your text calculations here
    const width = this.textNode.getTextWidth();
  }
  render() {
    return (
      <Text
        {...someProps}
        ref={node => {
          this.textNode = node;
        }}
      />
    );
  }
}

[damiangreen]

@SyntaxRules the result of measureText appears to be less than the width of textRef.current.width() for some reason. I seem to have to hack a work around by adding additional pixels. It appears this is because measureText omits any padding applied. Is this a bug? Some example working code for those that arrive here.

const textPadding = 4

const TopologyNodeLabel = ({
  text,
  position: { x, y },
  included,
  nodeIsHovered,
}: Props) => {
  const { isDarkTheme, orientation } = useTopologyChartContextValue()
  const labelRef = useRef<Konva.Label>(null)
  const textRef = useRef<Konva.Text>(null)
  const textColor = isDarkTheme ? 'white' : 'black'
  const opacity = included || nodeIsHovered ? 1 : 0.5

  useEffect(() => {
    if (labelRef?.current && textRef?.current) {
      const width = textRef.current.measureSize(text).width + textPadding * 2
      const maxWidth =
        orientation === 'vertical'
          ? nodeLabelWidthVerticalOrientation
          : nodeLabelWidth

      const exceeds = width > maxWidth
      const newWidth = exceeds ? maxWidth : width

      textRef.current.setAttrs({
        ellipsis: exceeds,
        width: newWidth,
      } as Konva.TextConfig)

      if (orientation === 'vertical') {
        const newX = x - newWidth / 2
        labelRef.current.setAttrs({
          x: newX,
        })
      }
    }
  }, [orientation, x, text])

  const labelPosition =
    orientation === 'horizontal'
      ? { x: x + nodeLabelNodeOffset, y: y - 10 }
      : { x: x - nodeLabelWidth / 2, y: y + nodeLabelNodeOffset }
  return (
    <Label
      ref={labelRef}
      x={labelPosition.x}
      y={labelPosition.y}
      transformsEnabled="position"
      listening={false}
    >
      <Tag
        fill={isDarkTheme ? colors.midnight90 : colors.midnight10}
        opacity={opacity}
        listening={false}
        transformsEnabled="position"
      />
      <Text
        ref={textRef}
        text={text}
        padding={textPadding}
        fontFamily={fonts.dattoDIN}
        fill={textColor}
        opacity={opacity}
        wrap="none"
        listening={false}
        transformsEnabled="position"
      />
    </Label>
  )
}

export default TopologyNodeLabel