Optimise re-rendering to not destroy theme level <defs> [#6]

lib/sequence-diagram.js

@@ -4738,11 +4738,7 @@ define('sequence/Renderer',[
 				components = BaseComponent.getComponents();
 			}
 
-			this.separationStage = this.separationStage.bind(this);
+			this._bindMethods();
-			this.renderStage = this.renderStage.bind(this);
-
-			this.addSeparation = this.addSeparation.bind(this);
-			this.addDef = this.addDef.bind(this);
 
 			this.state = {};
 			this.width = 0;
@@ -4752,6 +4748,7 @@ define('sequence/Renderer',[
 			this.namespace = parseNamespace(namespace);
 			this.components = components;
 			this.SVGTextBlockClass = SVGTextBlockClass;
+			this.knownThemeDefs = new Set();
 			this.knownDefs = new Set();
 			this.highlights = new Map();
 			this.currentHighlight = -1;
@@ -4761,6 +4758,14 @@ define('sequence/Renderer',[
 			});
 		}
 
+		_bindMethods() {
+			this.separationStage = this.separationStage.bind(this);
+			this.renderStage = this.renderStage.bind(this);
+			this.addSeparation = this.addSeparation.bind(this);
+			this.addThemeDef = this.addThemeDef.bind(this);
+			this.addDef = this.addDef.bind(this);
+		}
+
 		addTheme(theme) {
 			this.themes.set(theme.name, theme);
 		}
@@ -4768,6 +4773,7 @@ define('sequence/Renderer',[
 		buildStaticElements() {
 			this.base = svg.makeContainer();
 
+			this.themeDefs = svg.make('defs');
 			this.defs = svg.make('defs');
 			this.mask = svg.make('mask', {
 				'id': this.namespace + 'LineMask',
@@ -4780,6 +4786,7 @@ define('sequence/Renderer',[
 			this.blocks = svg.make('g');
 			this.actionShapes = svg.make('g');
 			this.actionLabels = svg.make('g');
+			this.base.appendChild(this.themeDefs);
 			this.base.appendChild(this.defs);
 			this.base.appendChild(this.agentLines);
 			this.base.appendChild(this.blocks);
@@ -4790,6 +4797,18 @@ define('sequence/Renderer',[
 			this.sizer = new this.SVGTextBlockClass.SizeTester(this.base);
 		}
 
+		addThemeDef(name, generator) {
+			const namespacedName = this.namespace + name;
+			if(this.knownThemeDefs.has(name)) {
+				return namespacedName;
+			}
+			this.knownThemeDefs.add(name);
+			const def = generator();
+			def.setAttribute('id', namespacedName);
+			this.themeDefs.appendChild(def);
+			return namespacedName;
+		}
+
 		addDef(name, generator) {
 			const namespacedName = this.namespace + name;
 			if(this.knownDefs.has(name)) {
@@ -5087,7 +5106,12 @@ define('sequence/Renderer',[
 			this.currentY = 0;
 		}
 
-		_reset() {
+		_reset(theme) {
+			if(theme) {
+				this.knownThemeDefs.clear();
+				svg.empty(this.themeDefs);
+			}
+
 			this.knownDefs.clear();
 			this.highlights.clear();
 			this.currentHighlight = -1;
@@ -5124,16 +5148,15 @@ define('sequence/Renderer',[
 
 		render(sequence) {
 			const prevHighlight = this.currentHighlight;
-			this._reset();
+			const oldTheme = this.theme;
 
-			const themeName = sequence.meta.theme;
+			this.theme = this.getThemeNamed(sequence.meta.theme);
-			this.theme = this.themes.get(themeName);
+
-			if(!this.theme) {
+			const themeChanged = (this.theme !== oldTheme);
-				this.theme = this.themes.get('');
+			this._reset(themeChanged);
-			}
 
 			this.theme.reset();
-			this.theme.addDefs(this.addDef);
+			this.theme.addDefs(this.addThemeDef);
 
 			this.title.set({
 				attrs: this.theme.titleAttrs,
@@ -5166,6 +5189,14 @@ define('sequence/Renderer',[
 			return this.getThemeNames().map((name) => this.themes.get(name));
 		}
 
+		getThemeNamed(themeName) {
+			const theme = this.themes.get(themeName);
+			if(theme) {
+				return theme;
+			}
+			return this.themes.get('');
+		}
+
 		getAgentX(name) {
 			return this.agentInfos.get(name).x;
 		}

scripts/sequence/Renderer.js

@@ -75,11 +75,7 @@ define([
 				components = BaseComponent.getComponents();
 			}
 
-			this.separationStage = this.separationStage.bind(this);
+			this._bindMethods();
-			this.renderStage = this.renderStage.bind(this);
-
-			this.addSeparation = this.addSeparation.bind(this);
-			this.addDef = this.addDef.bind(this);
 
 			this.state = {};
 			this.width = 0;
@@ -89,6 +85,7 @@ define([
 			this.namespace = parseNamespace(namespace);
 			this.components = components;
 			this.SVGTextBlockClass = SVGTextBlockClass;
+			this.knownThemeDefs = new Set();
 			this.knownDefs = new Set();
 			this.highlights = new Map();
 			this.currentHighlight = -1;
@@ -98,6 +95,14 @@ define([
 			});
 		}
 
+		_bindMethods() {
+			this.separationStage = this.separationStage.bind(this);
+			this.renderStage = this.renderStage.bind(this);
+			this.addSeparation = this.addSeparation.bind(this);
+			this.addThemeDef = this.addThemeDef.bind(this);
+			this.addDef = this.addDef.bind(this);
+		}
+
 		addTheme(theme) {
 			this.themes.set(theme.name, theme);
 		}
@@ -105,6 +110,7 @@ define([
 		buildStaticElements() {
 			this.base = svg.makeContainer();
 
+			this.themeDefs = svg.make('defs');
 			this.defs = svg.make('defs');
 			this.mask = svg.make('mask', {
 				'id': this.namespace + 'LineMask',
@@ -117,6 +123,7 @@ define([
 			this.blocks = svg.make('g');
 			this.actionShapes = svg.make('g');
 			this.actionLabels = svg.make('g');
+			this.base.appendChild(this.themeDefs);
 			this.base.appendChild(this.defs);
 			this.base.appendChild(this.agentLines);
 			this.base.appendChild(this.blocks);
@@ -127,6 +134,18 @@ define([
 			this.sizer = new this.SVGTextBlockClass.SizeTester(this.base);
 		}
 
+		addThemeDef(name, generator) {
+			const namespacedName = this.namespace + name;
+			if(this.knownThemeDefs.has(name)) {
+				return namespacedName;
+			}
+			this.knownThemeDefs.add(name);
+			const def = generator();
+			def.setAttribute('id', namespacedName);
+			this.themeDefs.appendChild(def);
+			return namespacedName;
+		}
+
 		addDef(name, generator) {
 			const namespacedName = this.namespace + name;
 			if(this.knownDefs.has(name)) {
@@ -424,7 +443,12 @@ define([
 			this.currentY = 0;
 		}
 
-		_reset() {
+		_reset(theme) {
+			if(theme) {
+				this.knownThemeDefs.clear();
+				svg.empty(this.themeDefs);
+			}
+
 			this.knownDefs.clear();
 			this.highlights.clear();
 			this.currentHighlight = -1;
@@ -461,16 +485,15 @@ define([
 
 		render(sequence) {
 			const prevHighlight = this.currentHighlight;
-			this._reset();
+			const oldTheme = this.theme;
 
-			const themeName = sequence.meta.theme;
+			this.theme = this.getThemeNamed(sequence.meta.theme);
-			this.theme = this.themes.get(themeName);
+
-			if(!this.theme) {
+			const themeChanged = (this.theme !== oldTheme);
-				this.theme = this.themes.get('');
+			this._reset(themeChanged);
-			}
 
 			this.theme.reset();
-			this.theme.addDefs(this.addDef);
+			this.theme.addDefs(this.addThemeDef);
 
 			this.title.set({
 				attrs: this.theme.titleAttrs,
@@ -503,6 +526,14 @@ define([
 			return this.getThemeNames().map((name) => this.themes.get(name));
 		}
 
+		getThemeNamed(themeName) {
+			const theme = this.themes.get(themeName);
+			if(theme) {
+				return theme;
+			}
+			return this.themes.get('');
+		}
+
 		getAgentX(name) {
 			return this.agentInfos.get(name).x;
 		}

scripts/sequence/SequenceDiagram_spec.js

@@ -20,6 +20,7 @@ defineDescribe('SequenceDiagram', [
 	function getSimplifiedContent(d) {
 		return (d.dom().outerHTML
 			.replace(/<g><\/g>/g, '')
+			.replace(/<defs><\/defs>/g, '')
 			.replace(' xmlns="http://www.w3.org/2000/svg" version="1.1"', '')
 		);
 	}