d3plus / d3plus-text

A smart SVG text box with line wrapping and automatic font size scaling.
MIT License
105 stars 19 forks source link

detect wrapping bounds based on a shape #6

Open davelandry opened 8 years ago

davelandry commented 8 years ago

The current version of text wrapping in D3Plus v1 will extract x, y, width, and height from a shape placed adjacent to the text (either a <rect> or a <circle>).

One of our goals with these new modules is to sort of "demystify" a lot of the magic that happens behind the scenes to allow better control over all aspects of the functions. That being said, this is a killer feature that should be migrated over.

My initial thought is to have the .select( ) method also support being passed a shape instead of a container, and in that case, extrapolate the values from that shape and insert the new text element immediately after it in the DOM. Shouldn't be too hard.

I think that this can also be coded in a way so that if the shape's properties change, the text will re-wrap if called again.

davelandry commented 5 years ago

Text from #105:

@wheelerlaw I agree, the old 1.0 logic of detecting the size, positioning, and text of a label based on the DOM structure was super handy. I don't have the capacity right now to port it over, but ideally the logic would be:

If the data passed to textWrap is an HTMLELement or D3Selection:

  1. Analyze the shape to determine the width, height, x, and y properties
  2. Analyze any available sibling <text> element to determine the text and any inline font styles

The old logic for parsing the size can be found here, and the old logic for text is here. These are both used here. The old code is in coffeescript 😒

Consider these either notes for my future self, or guidance for someone to make a PR 🍻