Provide href attribute support in a elements (#313)

* Fix getBoundingBoxByChildren function

Do not use dummy (all 0) bounding box when search
bonding box for all children.
Otherwise minimal values always will be 0.
Also take into account transformation attributes of child node -
it may differ from child to child.
Apply scale and translation, but not rotation yet

* Provide bounding box for plain text - without tspan

While `a` element typically used together with text,
one need to have estimation of bounding box for text.
To avoid reimplementation of complete text rendering logic
just remember text position and sizes as bounding box.

Implemented only for plain text, any usage of tspan will not work properly

* Introduce Anchor class

It derives from Group class and uses same rendering.
Plus if `href` attribute specified - adds link with bounding box.
Requires usage of scale and page height values -
otherwise created link area does not match drawn text

* Add test for the anchor element

This test also can be used to demonstrate missing
support of dominant-baseline attribute of the text

* Update some other refs

Changes because of new implementation of bounding box

Author: linev

src/nodes/anchor.ts

@@ -0,0 +1,19 @@
+import { Group } from './group'
+import { Context } from '../context/context'
+import { getAttribute } from '../utils/node'
+
+export class Anchor extends Group {
+  protected async renderCore(context: Context): Promise<void> {
+    await super.renderCore(context)
+
+    const href = getAttribute(this.element, context.styleSheets, 'href')
+    if (href) {
+      const box = this.getBoundingBox(context)
+      const scale = context.pdf.internal.scaleFactor
+      const ph = context.pdf.internal.pageSize.getHeight()
+
+      context.pdf.link(scale*(box[0] * context.transform.sx + context.transform.tx),
+                       ph - scale*(box[1] * context.transform.sy + context.transform.ty), scale*box[2], scale*box[3], { url: href })
+    }
+  }
+}

src/nodes/text.ts

@@ -24,6 +24,7 @@ interface TrimInfo {
 }
 
 export class TextNode extends GraphicsNode {
+  private boundingBox: number[] = []
   private processTSpans(
     textNode: SvgNode,
     node: Element,
@@ -159,6 +160,7 @@ export class TextNode extends GraphicsNode {
           renderingMode: textRenderingMode === 'fill' ? void 0 : textRenderingMode,
           charSpace: charSpace === 0 ? void 0 : charSpace
         })
+        this.boundingBox = [textX + dx - xOffset, textY + dy + 0.1 * pdfFontSize, context.textMeasure.measureTextWidth(transformedText, context.attributeState), pdfFontSize]
       }
     } else {
       // otherwise loop over tspans and position each relative to the previous one
@@ -228,7 +230,7 @@ export class TextNode extends GraphicsNode {
   }
 
   protected getBoundingBoxCore(context: Context): Rect {
-    return defaultBoundingBox(this.element, context)
+    return this.boundingBox.length > 0 ? this.boundingBox : defaultBoundingBox(this.element, context)
   }
 
   protected computeNodeTransformCore(context: Context): Matrix {

src/parse.ts

@@ -17,6 +17,7 @@ import { RadialGradient } from './nodes/radialgradient'
 import { Polyline } from './nodes/polyline'
 import { Svg } from './nodes/svg'
 import { Group } from './nodes/group'
+import { Anchor } from './nodes/anchor'
 import cssesc from 'cssesc'
 import { ClipPath } from './nodes/clippath'
 import { Symbol } from './nodes/symbol'
@@ -29,6 +30,8 @@ export function parse(node: Element, idMap?: { [id: string]: SvgNode }): SvgNode
 
   switch (node.tagName.toLowerCase()) {
     case 'a':
+      svgnode = new Anchor(node, children)
+      break
     case 'g':
       svgnode = new Group(node, children)
       break

src/utils/bbox.ts

@@ -7,9 +7,20 @@ export function getBoundingBoxByChildren(context: Context, svgnode: SvgNode): nu
   if (getAttribute(svgnode.element, context.styleSheets, 'display') === 'none') {
     return [0, 0, 0, 0]
   }
-  let boundingBox = [0, 0, 0, 0]
+  let boundingBox : number[] = []
   svgnode.children.forEach(child => {
     const nodeBox = child.getBoundingBox(context)
+    if ((nodeBox[0] === 0) && (nodeBox[1] === 0) && (nodeBox[2] === 0) && (nodeBox[3] === 0))
+       return
+    const transform = child.computeNodeTransform(context)
+    // TODO: take into account rotation matrix
+    nodeBox[0] = nodeBox[0] * transform.sx + transform.tx
+    nodeBox[1] = nodeBox[1] * transform.sy + transform.ty
+    nodeBox[2] = nodeBox[2] * transform.sx
+    nodeBox[3] = nodeBox[3] * transform.sy
+    if (boundingBox.length === 0)
+      boundingBox = nodeBox
+    else
     boundingBox = [
       Math.min(boundingBox[0], nodeBox[0]),
       Math.min(boundingBox[1], nodeBox[1]),
@@ -19,7 +30,7 @@ export function getBoundingBoxByChildren(context: Context, svgnode: SvgNode): nu
         Math.min(boundingBox[1], nodeBox[1])
     ]
   })
-  return boundingBox
+  return boundingBox.length === 0 ? [0, 0, 0, 0] : boundingBox
 }
 
 export function defaultBoundingBox(element: Element, context: Context): Rect {

test/common/tests.js

@@ -1,4 +1,5 @@
 window.tests = [
+  'anchor',
   'attribute-style-precedence',
   'clippath',
   'clippath-empty',