first version of cross fade text updt

mwes/mwe_text.html

@@ -26,6 +26,9 @@
     import {AddMathJax} from '../src/functions/AddMathJax.js'
     import {TextObject} from '../src/classes/TextObject.js'
 
+    // AddMathJax needs to be bound to window for text updates to work!!!
+    window.AddMathJax = AddMathJax
+
     if (document.URL.includes('text_hh')){
       window.currentTime = 0
       performance.now = () => currentTime
@@ -57,8 +60,8 @@
     let text1 = new TextObject(textparams1)
 
     let textparams2 = {
-      "pos"            : [[1200,700], [1200,500]],
-      "textAreaWidth"  : 600,
+      "pos"            : [[1200,700], [700,550]],
+      "textAreaWidth"  : 800,
       "textAreaHeight" : 300,      
       "id"             : "txt2",
       "text"           : "$y = \\alpha + \\beta \\mathbf{X}$",
@@ -85,14 +88,23 @@
     /*********************************
     Draw
     *********************************/
+    timing = timing + 1000
+    text1.Draw({delay:timing, duration:1600})
+    timing = timing + 1000
+    text2.Draw({delay:timing, duration:1000, type:"movein"})
+    text3.Draw({delay:timing, duration:1000, type:"movein"})        
+
+    timing = timing + 3000
+    text3.UpdateText({delay:timing, duration:1000, params:{text:"look at this"}})
+
+    timing = timing + 2000
+    text2.Update({delay:timing, duration:1500, params:{moveStepNo:1, newScale:1.5}})
+
+    timing = timing + 2000
+    text2.UpdateText({delay:timing, duration:1000, params:{text:"$y = \\gamma + \\beta_{1} X_{1} + \\beta_{2} X_{2}$"}})
+
     timing = timing + 1500
-    //text1.Draw({delay:timing, duration:1600})
-    text2.Draw({delay:timing, duration:1600, type:"movein"})
-    text3.Draw({delay:timing, duration:1600, type:"movein"})        
-
-    //timing = timing + 100000
-    //text2.UpdateText({delay:timing, duration:1500, params:{}})    
-    //text2.Update({delay:timing, duration:1500, params:{moveStepNo:1, newScale:1.5}})
+    text3.UpdateText({delay:timing, duration:1000, params:{text:"change again!"}})
 
     // This needs to be added in conjunction with the import above!
     AddMathJax(svg)

src/classes/TextObject.js

@@ -14,33 +14,82 @@ export class TextObject extends AnimObject{
 		// Foreign object to hold html text
 		let fo = this.group.append('foreignObject')
 					       .attr('width',this.textAreaWidth)
-					       .attr('height',this.textAreaHeight)			
+						   .attr('height',this.textAreaHeight)
+						   .style("position", "relative")			
 
 		fo.append('xhtml:div')
 		   .attr('id',this.id + "_xhtml")
+		   .style("position", "absolute")
+		   .style("top", 0)
+		   .style("left", 0)
+		   .style("bottom", 0)
+		   .style("right", 0)		   
 		   .style("font-family",this.fontFamily)				
 		   .style("color", this.textColor)
 		   .attr("align", this.textAlign)											
 		   .style("font-size", this.fontSize + "px")
 		   .append("text")
 		   .html(this.text)
+
+		// Save foreign object
+		this.fo = fo;
 	}
 
-	UpdateText({delay, duration, params}={}){
-		// Update text "text1" -> "text2"
-
-		/*
-		To make swap and cross-fade to work, need to hide fade out
-		old xhtml:div and replace it w/ new, while somehow keeping old
-		ID. Not sure if this works with other kinds of transitions.
-		*/
-		let type = params.type || "swap"
-
-		d3.select("#"+this.id + "_xhtml")
+	UpdateText({delay, duration, params={}}={}){
+
+		d3.timeout(() => {
+
+			// Update text "text1" -> "text2"
+			// Params is of same type as in initialization.
+
+			// This prolly should extend Update! Or dunno of this is possible...
+
+			// Write parameter update still!
+			// if params = {}, then take those from before. Text should be included
+			// in the params passed in here, other not.
+			//let type = params.type || "crossfade"
+
+			this.text = params.text || this.text
+			let extraDelayShare = params.extraDelayShare ||  0.2
+
+			// Change ID of text to be hidden
+			d3.select("#"+this.id + "_xhtml")
+			  .attr("id",this.id + "_xhtml" + "_old")	
+
+			// New xhtml text to fo with same ID as the old
+			this.fo.append('xhtml:div')
+			.attr('id',this.id + "_xhtml")
+			.style("position", "absolute")
+			.style("top", 0)
+			.style("left", 0)
+			.style("bottom", 0)
+			.style("right", 0)
+			.style("font-family",this.fontFamily)
+			.style("opacity",0.0)		   				
+			.style("color", this.textColor)
+			.attr("align", this.textAlign)											
+			.style("font-size", this.fontSize + "px")
+			.append("text")
+			.html(this.text)
+
+			// Fade out old and fade in new
+			d3.select("#"+this.id + "_xhtml" + "_old")
+			.transition()
+			.delay(0)
+			.duration(duration)
+			.style("opacity",0)
+			.remove()
+			d3.select("#"+this.id + "_xhtml")
 			.transition()
-			.delay(delay)
+			.delay(extraDelayShare*duration)
 			.duration(duration)
-			.text("$y = \\alpha + \\beta \\mathbf{X}$")	
+			.style("opacity",1)
+
+			// Make sure latex works
+			window.AddMathJax(d3.select('#'+this.svgid))			
+
+		},delay)
+
 	}