Nice write up, Justin! I was one of the first engineers at a competitor of TeeSpring's, and we tackled the same problems. We used Fabric.js in our second iteration (first was jQuery).
We have a similar feature at 43Layers (e.g. [1]) and went through a couple iterations. Ours was made more complex because it has to mesh with a 3D canvas, so originally it was a combination of overlapping DOM elements, an SVG element, and a 3D canvas. We also use React, so movement of the selection box created events that generally had to flow through multiple react elements. Getting the coordinates of everything matching in all three contexts was an exercise in annoyance (given how simple it seems), especially for things like fonts which have bounding boxes which bear only a passing relationship with the actual bounding boxes of the text on screen.
Eventually, we ditched the SVG and moved more things into 3D, which made for a better design in the end. For example, now we calculate 3D geometry for the font from its curves and get an actual real bounding box for it.
Anyway, it's interesting to read about how other people solved the same problem.
We used fabric.js as well to create custom laser printed/engraved products. As with you, our first iteration was just standard javascript with jQuery, but fabric.js made a lot of things much easier.
bjterry|10 years ago
Eventually, we ditched the SVG and moved more things into 3D, which made for a better design in the end. For example, now we calculate 3D geometry for the font from its curves and get an actual real bounding box for it.
Anyway, it's interesting to read about how other people solved the same problem.
1: https://www.43layers.com/products/laser-cut-coasters/Custom-...
loopbit|10 years ago
jkaunisv1|10 years ago