From 4469c9b6f99b93824be2f1edbf20800b8f3b2d52 Mon Sep 17 00:00:00 2001 From: Jan-Jaap Korpershoek Date: Wed, 5 Oct 2022 22:51:53 +0200 Subject: [PATCH 1/3] Update to current version of Reveal.js --- sequence-diagrams-plugin.js | 186 ++++++++++++++++++------------------ 1 file changed, 93 insertions(+), 93 deletions(-) diff --git a/sequence-diagrams-plugin.js b/sequence-diagrams-plugin.js index 5b9e2a6..55f77f4 100644 --- a/sequence-diagrams-plugin.js +++ b/sequence-diagrams-plugin.js @@ -1,94 +1,94 @@ -var RevealSequenceDiagram = window.RevealSequenceDiagram || (function(){ - - var className = "sequence-diagram"; - var classNameBuilt = "sequence-diagram-built"; - var config = Reveal.getConfig().sequencediagrams; - - function onRevealJsReady(event){ - var elements = document.getElementsByClassName(className); - for (var i = 0; i < elements.length; i++ ){ - var diagramBlueprintElement = elements[i]; - - removeCreatedDiagram(diagramBlueprintElement); - var diagramContainer = document.createElement("div"); - insertNodeBefore(diagramBlueprintElement, diagramContainer); - var diagramSyntax = diagramBlueprintElement.innerText; - var options = getOptions(diagramBlueprintElement); - createDiagram(diagramContainer, options, diagramSyntax); - } +var RevealSequenceDiagram = () => ({ + id: "sequence-diagram", + init: (Reveal) => { + var config = Reveal.getConfig().sequencediagrams; + var className = "sequence-diagram"; + var classNameBuilt = "sequence-diagram-built"; + + function onRevealJsReady(event){ + var elements = document.getElementsByClassName(className); + for (var i = 0; i < elements.length; i++ ){ + var diagramBlueprintElement = elements[i]; + + removeCreatedDiagram(diagramBlueprintElement); + var diagramContainer = document.createElement("div"); + insertNodeBefore(diagramBlueprintElement, diagramContainer); + var diagramSyntax = diagramBlueprintElement.innerText; + var options = getOptions(diagramBlueprintElement); + createDiagram(diagramContainer, options, diagramSyntax); + } + } + + function removeCreatedDiagram(node) { + if(node.previousSibling && node.previousSibling.className === classNameBuilt){ + node.parentNode.removeChild(node.previousSibling); + } + } + + function insertNodeBefore(referenceNode, newNode) { + referenceNode.parentNode.insertBefore(newNode, referenceNode); + } + + function createDiagram(diagramContainer, options, diagramSyntax) { + var diagram = Diagram.parse(diagramSyntax); + listenToDiagramIsRendered(diagramContainer, options, makeFragmentsIfRequired); + diagram.drawSVG(diagramContainer, { theme: options.theme }); + } + + function listenToDiagramIsRendered(diagramContainer, options, callback){ + var observer = new MutationObserver(function (e) { + + Reveal.sync(); + callback(diagramContainer, options) + + if(config && config.initialize){ + config.initialize(diagramContainer); + } + + this.disconnect(); + }); + + observer.observe(diagramContainer, { childList: true }); + } + + function makeFragmentsIfRequired(diagramContainer, options){ + if (options.useFragments && diagramContainer) { + var svg = diagramContainer; + var signalElements = svg.querySelectorAll('.signal, .note'); + for(var signalElementKey in signalElements){ + var signalElement = signalElements[signalElementKey]; + if(signalElement.classList){ + signalElement.classList.add('fragment'); + } + } + } + } + + function getOptions(element){ + + var useFragments = getOption(element, "useFragments", false); + if(typeof useFragments == "string"){ + useFragments = useFragments.toLowerCase() == "true"; + } + + return { + theme : getOption(element, "theme", "simple"), + useFragments : useFragments, + }; + } + + function getOption(element, key, defaultOption){ + if(element.hasAttribute("data-config-"+key)){ + return element.attributes["data-config-"+key].value; + } + + if(config && config.hasOwnProperty(key)){ + return config[key]; + } + + return defaultOption; + } + + Reveal.addEventListener('ready',onRevealJsReady); } - - function removeCreatedDiagram(node) { - if(node.previousSibling && node.previousSibling.className === classNameBuilt){ - node.parentNode.removeChild(node.previousSibling); - } - } - - function insertNodeBefore(referenceNode, newNode) { - referenceNode.parentNode.insertBefore(newNode, referenceNode); - } - - function createDiagram(diagramContainer, options, diagramSyntax) { - var diagram = Diagram.parse(diagramSyntax); - listenToDiagramIsRendered(diagramContainer, options, makeFragmentsIfRequired); - diagram.drawSVG(diagramContainer, { theme: options.theme }); - } - - function listenToDiagramIsRendered(diagramContainer, options, callback){ - var observer = new MutationObserver(function (e) { - - Reveal.sync(); - callback(diagramContainer, options) - - if(config && config.initialize){ - config.initialize(diagramContainer); - } - - this.disconnect(); - }); - - observer.observe(diagramContainer, { childList: true }); - } - - function makeFragmentsIfRequired(diagramContainer, options){ - if (options.useFragments && diagramContainer) { - var svg = diagramContainer; - var signalElements = svg.querySelectorAll('.signal, .note'); - for(var signalElementKey in signalElements){ - var signalElement = signalElements[signalElementKey]; - if(signalElement.classList){ - signalElement.classList.add('fragment'); - } - } - } - } - - function getOptions(element){ - - var useFragments = getOption(element, "useFragments", false); - if(typeof useFragments == "string"){ - useFragments = useFragments.toLowerCase() == "true"; - } - - return { - theme : getOption(element, "theme", "simple"), - useFragments : useFragments, - }; - } - - function getOption(element, key, defaultOption){ - if(element.hasAttribute("data-config-"+key)){ - return element.attributes["data-config-"+key].value; - } - - if(config && config.hasOwnProperty(key)){ - return config[key]; - } - - return defaultOption; - } - - Reveal.addEventListener('ready',onRevealJsReady); - -})(); - +}) From 59d490fffd75642b3086544b40d1066243f5b0ab Mon Sep 17 00:00:00 2001 From: Jan-Jaap Korpershoek Date: Tue, 2 May 2023 15:20:27 +0200 Subject: [PATCH 2/3] Fix issues with incorrect rendering Now renders at the start of each slide instead of rendering all diagrams when the presentation is loaded --- sequence-diagrams-plugin.js | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/sequence-diagrams-plugin.js b/sequence-diagrams-plugin.js index 55f77f4..dfc2cbc 100644 --- a/sequence-diagrams-plugin.js +++ b/sequence-diagrams-plugin.js @@ -5,13 +5,16 @@ var RevealSequenceDiagram = () => ({ var className = "sequence-diagram"; var classNameBuilt = "sequence-diagram-built"; - function onRevealJsReady(event){ - var elements = document.getElementsByClassName(className); + function renderDiagrams(event){ + var elements = Reveal.getCurrentSlide().getElementsByClassName(className); for (var i = 0; i < elements.length; i++ ){ var diagramBlueprintElement = elements[i]; - removeCreatedDiagram(diagramBlueprintElement); + if (wasBuilt(diagramBlueprintElement)) { + continue + } var diagramContainer = document.createElement("div"); + diagramContainer.className = classNameBuilt insertNodeBefore(diagramBlueprintElement, diagramContainer); var diagramSyntax = diagramBlueprintElement.innerText; var options = getOptions(diagramBlueprintElement); @@ -19,10 +22,8 @@ var RevealSequenceDiagram = () => ({ } } - function removeCreatedDiagram(node) { - if(node.previousSibling && node.previousSibling.className === classNameBuilt){ - node.parentNode.removeChild(node.previousSibling); - } + function wasBuilt(node) { + return node.previousSibling && node.previousSibling.className === classNameBuilt } function insertNodeBefore(referenceNode, newNode) { @@ -89,6 +90,7 @@ var RevealSequenceDiagram = () => ({ return defaultOption; } - Reveal.addEventListener('ready',onRevealJsReady); + Reveal.addEventListener('ready',renderDiagrams); + Reveal.addEventListener('slidechanged',renderDiagrams); } }) From ccaa44bfa459fd79595f33112e6e1999fd4b497b Mon Sep 17 00:00:00 2001 From: Jan-Jaap Korpershoek Date: Wed, 3 May 2023 06:47:26 +0200 Subject: [PATCH 3/3] Overhaul rendering to be able to resize the diagrams --- README.md | 11 ++++++++--- dark.css | 16 ++++++++++++++++ default.css | 16 ++++++++++++++++ package.json | 3 ++- sequence-diagrams-plugin.js | 25 +++++++++++++++++-------- 5 files changed, 59 insertions(+), 12 deletions(-) create mode 100644 dark.css create mode 100644 default.css diff --git a/README.md b/README.md index 9cca024..b764988 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,12 @@ Reveal.initialize({ }); ``` -Also import the CSS if you plan to use the hand drawn theme: +If you use dark mode, import dark.css: +```html + +``` + +Also import the following stylesheet if you plan to use the hand drawn theme: ```html ``` @@ -63,7 +68,7 @@ The plugin searches for all HTML objects with class `sequence-diagram`. Then it **Example:** ```html - + ``` The `data-config-*` attributes overrides the config from the reveal.js initialization options. But they are not required. diff --git a/dark.css b/dark.css new file mode 100644 index 0000000..330a8d4 --- /dev/null +++ b/dark.css @@ -0,0 +1,16 @@ +line { + stroke: white; +} + +marker { + stroke:white; + fill: white; +} + +.signal text { + fill: white; +} + +.signal text:hover { + fill: white; +} diff --git a/default.css b/default.css new file mode 100644 index 0000000..330a8d4 --- /dev/null +++ b/default.css @@ -0,0 +1,16 @@ +line { + stroke: white; +} + +marker { + stroke:white; + fill: white; +} + +.signal text { + fill: white; +} + +.signal text:hover { + fill: white; +} diff --git a/package.json b/package.json index cbab992..e28d0b1 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,8 @@ "copyLibToDist": "copyfiles -f ./bower_components/js-sequence-diagrams/dist/sequence-diagram-min.css ./bower_components/js-sequence-diagrams/dist/sequence-diagram-min.js ./dist/", "copyLibFontsToDist": "copyfiles -f ./bower_components/js-sequence-diagrams/dist/*woff* ./dist/", "copySelfToDist": "copyfiles -f ./sequence-diagrams-plugin.js ./dist/", - "build": "bower install && npm run copySelfToDist && npm run copyLibToDist && npm run copyLibFontsToDist && npm run copyLibDependenciesToDist" + "copyCSSToDist": "copyfiles -f ./*.css ./dist/", + "build": "bower install && npm run copySelfToDist && npm run copyLibToDist && npm run copyLibFontsToDist && npm run copyLibDependenciesToDist && npm run copyCSSToDist" }, "keywords": [ "reveal.js" diff --git a/sequence-diagrams-plugin.js b/sequence-diagrams-plugin.js index dfc2cbc..45b4e41 100644 --- a/sequence-diagrams-plugin.js +++ b/sequence-diagrams-plugin.js @@ -3,7 +3,6 @@ var RevealSequenceDiagram = () => ({ init: (Reveal) => { var config = Reveal.getConfig().sequencediagrams; var className = "sequence-diagram"; - var classNameBuilt = "sequence-diagram-built"; function renderDiagrams(event){ var elements = Reveal.getCurrentSlide().getElementsByClassName(className); @@ -13,29 +12,39 @@ var RevealSequenceDiagram = () => ({ if (wasBuilt(diagramBlueprintElement)) { continue } - var diagramContainer = document.createElement("div"); - diagramContainer.className = classNameBuilt - insertNodeBefore(diagramBlueprintElement, diagramContainer); - var diagramSyntax = diagramBlueprintElement.innerText; + var diagramSyntax = diagramBlueprintElement.textContent; + diagramBlueprintElement.innerHTML = ""; var options = getOptions(diagramBlueprintElement); - createDiagram(diagramContainer, options, diagramSyntax); + createDiagram(diagramBlueprintElement, options, diagramSyntax); } } function wasBuilt(node) { - return node.previousSibling && node.previousSibling.className === classNameBuilt + return node.firstChild.tagName == 'svg' } function insertNodeBefore(referenceNode, newNode) { referenceNode.parentNode.insertBefore(newNode, referenceNode); } + function createViewbox(svg) { + svg.setAttribute('viewBox', '0 0 ' + parseInt(svg.getAttribute('width'), 10) + ' ' + parseInt(svg.getAttribute('height'),10)); + svg.setAttribute('preserveAspectRatio', 'xMidYMid'); + svg.style.width = "100%" + svg.style.height = "100%" + } + function createDiagram(diagramContainer, options, diagramSyntax) { var diagram = Diagram.parse(diagramSyntax); - listenToDiagramIsRendered(diagramContainer, options, makeFragmentsIfRequired); + listenToDiagramIsRendered(diagramContainer, options, onRendered); diagram.drawSVG(diagramContainer, { theme: options.theme }); } + function onRendered(diagramContainer, options) { + makeFragmentsIfRequired(diagramContainer, options) + createViewbox(diagramContainer.firstChild) + } + function listenToDiagramIsRendered(diagramContainer, options, callback){ var observer = new MutationObserver(function (e) {