yaroslav
/
SequenceDiagram
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
David Evans 2018-01-12 21:26:26 +00:00
parent f0cb8e0ca5
commit 3553c66c9c
4 changed files with 90 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
lib/sequence-diagram.js
View File

@ -4738,11 +4738,7 @@ define('sequence/Renderer',[
components = BaseComponent.getComponents();
}
this.separationStage = this.separationStage.bind(this);
this.renderStage = this.renderStage.bind(this);
this.addSeparation = this.addSeparation.bind(this);
this.addDef = this.addDef.bind(this);
this._bindMethods();
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.themes.get(themeName);
if(!this.theme) {
this.theme = this.themes.get('');
}
this.theme = this.getThemeNamed(sequence.meta.theme);
const themeChanged = (this.theme !== oldTheme);
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;
}

2
lib/sequence-diagram.min.js vendored
View File

File diff suppressed because one or more lines are too long

57
scripts/sequence/Renderer.js
View File

@ -75,11 +75,7 @@ define([
components = BaseComponent.getComponents();
}
this.separationStage = this.separationStage.bind(this);
this.renderStage = this.renderStage.bind(this);
this.addSeparation = this.addSeparation.bind(this);
this.addDef = this.addDef.bind(this);
this._bindMethods();
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.themes.get(themeName);
if(!this.theme) {
this.theme = this.themes.get('');
}
this.theme = this.getThemeNamed(sequence.meta.theme);
const themeChanged = (this.theme !== oldTheme);
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;
}

1
scripts/sequence/SequenceDiagram_spec.js
View File

@ -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"', '')
);
}