How to programmatically save the svg map ?

[clodion]

Hi Ondras,

For printing reasons, I have to store the mindmap in a svg format (or png or something else).

Is there a way to get the svg / png / gif format of the mindmap with your new coding ?

If so, is it possible to generate this image without displaying the map on the screen ?

Thanks for your answer

[ondras]

Is there a way to get the svg / png / gif format of the mindmap with your new coding ?

The new SVG output is available via "Save as" -> "Image" -> "SVG".

If so, is it possible to generate this image without displaying the map on the screen ?

The app has no "programmatic" entrypoint, so you cannot really control it without using the UI. But you are free to adjust the app by modifying the source code and re-building, creating your own customized version (to be hosted on your own server/domain). You are then of course able to render the map without displaying it and generate the SVG output accordingly.

I am not 100% sure what user story / flow are you aiming for here; if you describe it in more detail, I can provide more detailed hints.

[clodion]

Thanks for this quick answer. I will try to be clearer

I would like to use the UI.

When clicking on my own button "save" of the UI, thanks to your advices #137, I can already get the map in json format and save it. It works perfectly to store the json map into a database. But in the same time, I need to generate the saved map in png format and store this file on the server.

This png file will be included into a generated pdf for printing when the user clicks on another UI button "print".

Then, I would like the app to generate the svg/png datas, so that I can crop it to send it with ajax to a php script. this script will record the corresponding svg/png file on the server. All this without parameters to be entered by the user (all should be transparent, the user just click on a "save" button)

[ondras]

I see. The "image" backend is currently only offering the resulting image data as download. I will update it so that you can use it to get the data via a JS call.

[ondras]

Please try updating to master now. The following should do the trick:

import { repo as formatRepo } from "./format/format.js";

let imageBackend = formatRepo.get("image");
let imageUrl = await imageBackend.save("svg"); // or "png"

Note that:

1. the save call is async (returns a Promise)
2. it will return an URL of the svg/png image: 1. for svg, the URL will be a data-uri, 2. for png, the URL will be a blob-uri (local to brower session, i.e. cannot be sent outside)

If you want image data, you will have to create an HTML image and make it load the given URL.

[clodion]

Hi Ondras, thanks to this quick answer.

With your advices, here is what i've made, as a complement to the #137 post. It creates a class wich allows a button to save the map under three differents formats at the same time

If it can help anybody.

// ========================================== // commande to save the map in json, svg and png format // ==========================================

new class saveDirect extends Command {

constructor() { 

super("saveDirect", find_map_label("save", mapLanguage));
this.keys = [{ code: "KeyS", ctrlKey: true, shiftKey: false }];

}

execute() { 
  
 // creates json format

  let data = currentMap.toJSON()

  let str = repo6.get("native").to(data); // str contains the json txt format for the map

  // now creates image files

  var image = new ImageBackend

  let svg_src = ""; // svg source data
  let png_src = ""; // png blob data

  image.save('png').then((response)=>{
    png_src = response;
  
  }).then(() => { 

    image.save('svg').then((svg)=>{
      
      svg_src = svg;

      // process to save files on the server

      mindmap_save(str, png_src, svg_src) // new javascript function , see below
    
    })

  })

  // process to manage save button display state

  var el = document.querySelector('[data-command="saveDirect"]')
  el.classList.remove('liveFullBut')
  el.classList.add('liveBorderBut')

}

}

// ========================================== // commande to send the map files on the server // use jquery ajax // ==========================================

function mindmap_save(str, png_src, svg_src) {

var formData = new FormData();

formData.set('files', png_src);
formData.append('svg_src', svg_src);
formData.append('json_src', str);

$.ajax('./mindmap_save.php', {
    method: "POST",
    data: formData,
    processData: false,
    contentType: false,
    success: function (data) {
        console.log(data);
    },
    error: function (data) {
        error_message(10);
    }
});

}

//============== // mindmap_save.php // PHP script on the server // saves the 3 files on files on the server .png, .svg, .json // ==============

<?php

$path_to_copy = '/' ; // your path on the server
   
chmod($path_to_copy, 0777);

if ($_POST['json_src']!="") {

    $file_to_copy = $path_to_copy . 'map.json'; 

    file_put_contents($file_to_copy, $_POST['json_src'])) 

}


// the png file is sent through _FILES

if (count($_FILES)>0) {

    $file_to_copy = $path_to_copy . 'map.png';

    move_uploaded_file($_FILES['files']['tmp_name'], $file_to_copy );

}

// the svg file is sent with all its datas
// extract the good part of the txt datas
// base64 decode to store on the server

if ($_POST['svg_src']!="") {

     $file_to_copy = $path_to_copy . 'map.svg';

     $dataSVG = explode(',', $_POST['svg_src']);

     if (count($dataSVG)==2) {

            $SVG =  base64_decode($dataSVG[1], false);

            file_put_contents($file_to_copy, $SVG);

        }

}

chmod($path_to_copy, 0755);

?>