layout.js findEndToken logic wrong (#207) · Issues · Tools / pagedjs

layout.js findEndToken logic wrong

I got an exception (line numbers wrong due to added logging code):

> An uncaught exception happened within the HTML page http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: Error: TypeError: node.getAttribute is not a function
    at findElement (http://localhost:8081/_/js/paged.js:602:19)
    at Layout.findEndToken (http://localhost:8081/_/js/paged.js:1738:18)
    at Page.checkUnderflowAfterResize (http://localhost:8081/_/js/paged.js:2097:36)
    at http://localhost:8081/_/js/paged.js:2069:12

My added console logging showed two text nodes in a row. The problematic code appears to be this, from findEndToken:

		if (isText(lastChild)) {

			if (lastChild.parentNode.dataset.ref) {
				lastNodeIndex = indexOf(lastChild);
				lastChild = lastChild.parentNode;
			} else {
				lastChild = lastChild.previousSibling;
			}
		}

		let original = findElement(lastChild, source);

I think lastChild = lastChild.previousSibling should be repeated until an element node is encountered. I wonder if the similar lastChild = lastChild.previousSibling on line 536 has the same problem.

The html that caused this (snippet that ended up at the page break):

<div class="sect2">
  <h3 id="_default_page_attribute_plantuml_default_options_inline"><a class="anchor" href="#_default_page_attribute_plantuml_default_options_inline"></a>Default page attribute <code>:plantuml-default-options: inline</code></h3>
  <div class="imageblock plantuml">
    <div class="content">
      <img src="../_images/0c8c1cc9af77582e1d52275ab142eaffe79423b2.png" alt="diagram">
    </div>
    <div class="title">Figure 5. As svg inline from page attribute</div>
  </div>
</div>

My console logging might be useful and might be comprehensible. The first entry is the text node that is expected to be an element node. The rest is a depth first traversal of the DOM tree from the text node's parent. The two adjacent text nodes are the last two children of the parent.

console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: bad node type:  3
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName:  #text
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents: ' '
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth:  0
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type:  1
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName:  DIV
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents:  Default page attribute :plantuml-default-options: inline

Figure 5. As svg inline from page attribute




 

console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth:  1
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type:  1
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName:  DIV
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents:  Default page attribute :plantuml-default-options: inline

Figure 5. As svg inline from page attribute





console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth:  2
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type:  1
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName:  DIV
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents:  Default page attribute :plantuml-default-options: inline

Figure 5. As svg inline from page attribute




console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth:  3
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type:  1
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName:  DIV
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents:  Default page attribute :plantuml-default-options: inline

Figure 5. As svg inline from page attribute



console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth:  4
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type:  1
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName:  DIV
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents:  Default page attribute :plantuml-default-options: inline

Figure 5. As svg inline from page attribute


console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth:  5
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type:  1
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName:  H3
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents:  Default page attribute :plantuml-default-options: inline
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth:  6
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type:  1
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName:  A
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents:  
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth:  6
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type:  3
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName:  #text
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents:  Default page attribute 
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth:  6
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type:  1
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName:  CODE
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents:  :plantuml-default-options: inline
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth:  7
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type:  3
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName:  #text
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents:  :plantuml-default-options: inline
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth:  5
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type:  1
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName:  DIV
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents:  

Figure 5. As svg inline from page attribute

console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth:  6
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type:  3
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName:  #text
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents:  

console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth:  6
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type:  1
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName:  DIV
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents:  

console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth:  7
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type:  3
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName:  #text
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents:  

console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth:  7
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type:  1
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName:  IMG
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents:  
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth:  6
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type:  1
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName:  DIV
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents:  Figure 5. As svg inline from page attribute
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth:  7
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type:  3
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName:  #text
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents:  Figure 5. As svg inline from page attribute
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth:  6
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type:  3
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName:  #text
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents:  

console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth:  5
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type:  3
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName:  #text
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents:  

console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth:  4
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type:  3
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName:  #text
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents:  

console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth:  3
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type:  3
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName:  #text
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents:  

console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth:  2
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type:  3
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName:  #text
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents:  

console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth:  1
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type:  3
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName:  #text
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents:   
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: This is the bad node
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth:  1
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type:  3
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName:  #text
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents:  

> An uncaught exception happened within the HTML page http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: Error: TypeError: node.getAttr

I got an exception (line numbers wrong due to added logging code):

```
> An uncaught exception happened within the HTML page http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: Error: TypeError: node.getAttribute is not a function
    at findElement (http://localhost:8081/_/js/paged.js:602:19)
    at Layout.findEndToken (http://localhost:8081/_/js/paged.js:1738:18)
    at Page.checkUnderflowAfterResize (http://localhost:8081/_/js/paged.js:2097:36)
    at http://localhost:8081/_/js/paged.js:2069:12
```

My added console logging showed two text nodes in a row.  The problematic code appears to be this, from findEndToken:

```
		if (isText(lastChild)) {

if (lastChild.parentNode.dataset.ref) {
				lastNodeIndex = indexOf(lastChild);
				lastChild = lastChild.parentNode;
			} else {
				lastChild = lastChild.previousSibling;
			}
		}

let original = findElement(lastChild, source);
```

I think `lastChild = lastChild.previousSibling` should be repeated until an element node is encountered.  I wonder if the similar `lastChild = lastChild.previousSibling` on line 536 has the same problem.

The html that caused this (snippet that ended up at the page break):

```
<div class="sect2">
  <h3 id="_default_page_attribute_plantuml_default_options_inline"><a class="anchor" href="#_default_page_attribute_plantuml_default_options_inline"></a>Default page attribute <code>:plantuml-default-options: inline</code></h3>
  <div class="imageblock plantuml">
    <div class="content">
      <img src="../_images/0c8c1cc9af77582e1d52275ab142eaffe79423b2.png" alt="diagram">
    </div>
    <div class="title">Figure 5. As svg inline from page attribute</div>
  </div>
</div>
```

My console logging might be useful and might be comprehensible.  The first entry is the text node that is expected to be an element node. The rest is a depth first traversal of the DOM tree from the text node's parent. The two adjacent text nodes are the last two children of the parent.

```
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: bad node type:  3
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName:  #text
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents: ' '
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth:  0
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type:  1
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName:  DIV
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents:  Default page attribute :plantuml-default-options: inline