add .png download button

LUMII-Syslab · Jan 2, 2025 · f2de30b · f2de30b
1 parent dd1cef7
commit f2de30b
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/app/imports/client/platform/templates/diagrams/diagram.html b/app/imports/client/platform/templates/diagrams/diagram.html
@@ -18,7 +18,7 @@
 
 <!-- Start of diagram template -->
 <template name="diagramTemplate">
-    
+
 <!--     <script src='//cdn.jsdelivr.net/yasr/2.4/yasr.bundled.min.js'></script>
     <script src='//cdn.jsdelivr.net/yasqe/2.2/yasqe.bundled.min.js'></script>
 
@@ -34,6 +34,7 @@
 
           <div class="row">
             <div class="col-lg-12 text-right">
+                <button id="download-diagram-image" type="button" class="btn btn-primary btn-sm">Download .png</button>
                 <button id="toggle-footer" type="button" class="btn btn-primary btn-sm">Toggle Footer</button>
                 <button id="toggle-dialoge-bar" type="button" class="btn btn-primary btn-sm">Toggle Dialog</button>
             </div>
@@ -359,7 +360,7 @@ <h4 class="modal-title">{{_ "add_sections"}}</h4>
 <template name="editingMessage">
 
     {{#with editing}}
-        
+
         {{#if lockingButton}}
             <div class="alert alert-success clearfix">
                 <button id="lockDiagram" type="button" class="btn btn-success btn-xs pull-right1">{{_ "diagram_edit_button"}}</button>

diff --git a/app/imports/client/platform/templates/diagrams/diagram.js b/app/imports/client/platform/templates/diagrams/diagram.js
@@ -168,6 +168,16 @@ Template.diagramTemplate.helpers({
 
 Template.diagramTemplate.events({
 
+	"click #download-diagram-image": function(e, template) {
+		e.preventDefault();
+
+    const diagram = Diagrams.findOne({_id: Session.get("activeDiagram")});
+
+    // TODO cleaner stage discovery
+    const dataURL = Konva.stages[1].toDataURL({ pixelRatio: 3 });
+    downloadURI(dataURL, `${diagram.name}.png`);
+  },
+
 	"click #toggle-dialoge-bar": function(e, template) {
 		e.preventDefault();
 
@@ -938,3 +948,14 @@ function update_editor_size(new_width, new_height) {
 	editor.size.setSize(new_width, new_height);
 }
 
+// function from https://stackoverflow.com/a/15832662/512042
+function downloadURI(uri, name) {
+  var link = document.createElement('a');
+  link.download = name;
+  link.href = uri;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  delete link;
+}
+