vmario/wisemapping-open-source
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-open-source.git synced 2024-11-15 11:07:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

Bug WISE-422 fixed: Add Safari hack for importing images.

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2015-03-24 21:33:13 -03:00
parent b9c5fcc9f5
commit f23d708385
8 changed files with 341 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
wise-webapp/src/main/java/com/wisemapping/exporter/ExportProperties.java
View File

@ -20,7 +20,6 @@ package com.wisemapping.exporter;
public class ExportProperties {
private ExportFormat format;
private String baseImgPath;
private String version;
public ExportFormat getFormat() {

85
wise-webapp/src/main/java/com/wisemapping/exporter/ExporterFactory.java
View File

@ -54,7 +54,7 @@ import java.util.regex.Pattern;
public class ExporterFactory {
private static final String GROUP_NODE_NAME = "g";
private static final String IMAGE_NODE_NAME = "image";
public static final int MARGING = 50;
public static final int MANGING = 50;
public static final String UTF_8_CHARSET_NAME = "UTF-8";
private File baseImgDir;
@ -127,17 +127,17 @@ public class ExporterFactory {
break;
}
case TEXT: {
final Exporter exporter = XSLTExporter.create(XSLTExporter.Type.TEXT);
final Exporter exporter = XSLTExporter.create(XSLTExporter.Type.TEXT);
exporter.export(xml.getBytes(UTF_8_CHARSET_NAME), output);
break;
}
case OPEN_OFFICE_WRITER: {
final Exporter exporter = XSLTExporter.create(XSLTExporter.Type.OPEN_OFFICE);
final Exporter exporter = XSLTExporter.create(XSLTExporter.Type.OPEN_OFFICE);
exporter.export(xml.getBytes(UTF_8_CHARSET_NAME), output);
break;
}
case MICROSOFT_EXCEL: {
final Exporter exporter = XSLTExporter.create(XSLTExporter.Type.MICROSOFT_EXCEL);
final Exporter exporter = XSLTExporter.create(XSLTExporter.Type.MICROSOFT_EXCEL);
exporter.export(xml.getBytes(UTF_8_CHARSET_NAME), output);
break;
}
@ -148,7 +148,7 @@ public class ExporterFactory {
break;
}
case MINDJET: {
final Exporter exporter = XSLTExporter.create(XSLTExporter.Type.MINDJET);
final Exporter exporter = XSLTExporter.create(XSLTExporter.Type.MINDJET);
exporter.export(xml.getBytes(UTF_8_CHARSET_NAME), output);
break;
}
@ -243,27 +243,22 @@ public class ExporterFactory {
Element elem = (Element) node;
// If the image is a external URL, embeed it...
String imgUrl = elem.getAttribute("href");
if (!imgUrl.startsWith("image/png;base64") ||!imgUrl.startsWith("data:image/png;base64") ) {
final String imgUrl = fixHref(elem);
if (!imgUrl.isEmpty() && (!imgUrl.startsWith("image/png;base64") || !imgUrl.startsWith("data:image/png;base64"))) {
elem.removeAttribute("href");
if (imgUrl == null || imgUrl.isEmpty()) {
imgUrl = elem.getAttribute("xlink:href"); // Do not support namespaces ...
elem.removeAttribute("xlink:href");
}
FileInputStream fis = null;
InputStream fis = null;
// Obtains file name ...
try {
final File iconFile = iconFile(imgUrl);
ByteArrayOutputStream bos = new ByteArrayOutputStream();
final ByteArrayOutputStream bos = new ByteArrayOutputStream();
fis = new FileInputStream(iconFile);
BASE64Encoder encoder = new BASE64Encoder();
encoder.encode(fis, bos);
elem.setAttribute("xlink:href", "data:image/png;base64," + bos.toString("8859_1"));
elem.appendChild(document.createTextNode(" "));
} catch (IOException e) {
e.printStackTrace();
} finally {
@ -274,28 +269,58 @@ public class ExporterFactory {
}
}
@NotNull
private String fixHref(@NotNull Element elem) {
// Fix href attribute ...
// Hack for IE: If the image is a external URL, embeed it...
String result = elem.getAttribute("href");
if (result.isEmpty()) {
result = elem.getAttribute("xlink:href");
if (!result.isEmpty()) {
elem.removeAttribute("xlink:href");
}
// Bug WISE-422: This seems to be a bug in Safari. For some reason, img add prefixed with NS1
// <image NS1:href="icons/sign_help.png"
final NamedNodeMap attributes = elem.getAttributes();
for (int i = 0; i < attributes.getLength(); i++) {
final Node node = attributes.item(i);
String nodeName = node.getNodeName();
if(nodeName.contains(":href")){
elem.removeAttribute(nodeName);
result = node.getNodeValue();
}
}
elem.setAttribute("href", result);
}
return result;
}
private File iconFile(@NotNull final String imgUrl) throws IOException {
int index = imgUrl.lastIndexOf("/");
final String iconName = imgUrl.substring(index + 1);
final File iconsDir = new File(baseImgDir, "icons");
File iconFile = new File(iconsDir, iconName);
if (!iconFile.exists()) {
File result = new File(iconsDir, iconName);
if (!result.exists()) {
// It's not a icon, must be a note, attach image ...
final File legacyIconsDir = new File(baseImgDir, "images");
iconFile = new File(legacyIconsDir, iconName);
result = new File(legacyIconsDir, iconName);
}
if (!iconFile.exists()) {
if (!result.exists()) {
final File legacyIconsDir = new File(iconsDir, "legacy");
iconFile = new File(legacyIconsDir, iconName);
result = new File(legacyIconsDir, iconName);
}
if (!iconFile.exists()) {
if (!result.exists() || result.isDirectory()) {
throw new IOException("Icon could not be found:" + imgUrl);
}
return iconFile;
return result;
}
@ -349,11 +374,11 @@ public class ExporterFactory {
}
// Add some extra margin ...
maxX += MARGING;
minX += -MARGING;
maxX += MANGING;
minX += -MANGING;
maxY += MARGING;
minY += -MARGING;
maxY += MANGING;
minY += -MANGING;
// Calculate dimentions ...
final double width = maxX + Math.abs(minX);
@ -366,13 +391,7 @@ public class ExporterFactory {
svgNode.setAttribute("width", Double.toString(width));
svgNode.setAttribute("height", Double.toString(height));
svgNode.setAttribute("preserveAspectRatio", "xMinYMin");
} catch (XPathExpressionException e) {
throw new ExportException(e);
} catch (ParseException e) {
throw new ExportException(e);
} catch (NumberFormatException e) {
throw new ExportException(e);
} catch (DOMException e) {
} catch (XPathExpressionException | ParseException | NumberFormatException | DOMException e) {
throw new ExportException(e);
}
}

10
wise-webapp/src/main/java/com/wisemapping/rest/view/TransformView.java
View File

@ -23,6 +23,7 @@ import com.wisemapping.exporter.ExportProperties;
import com.wisemapping.exporter.ExporterFactory;
import com.wisemapping.mail.NotificationService;
import com.wisemapping.security.Utils;
import org.jetbrains.annotations.NonNls;
import org.jetbrains.annotations.NotNull;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.oxm.jaxb.Jaxb2Marshaller;
@ -38,6 +39,8 @@ import java.util.Map;
public class TransformView extends AbstractView {
@NonNls
private static final String DEFAULT_ENCODING = "UTF-8";
private String contentType;
private ExportFormat exportFormat;
private NotificationService notificationService;
@ -74,7 +77,7 @@ public class TransformView extends AbstractView {
// Set file name...:http://stackoverflow.com/questions/5325322/java-servlet-download-filename-special-characters/13359949#13359949
final String fileName = (filename != null ? filename : "map") + "." + exportFormat.getFileExtension();
setContentDisposition(request, response, fileName);
this.setContentDisposition(request, response, fileName);
// Change image link URL.
final ServletContext servletContext = request.getSession().getServletContext();
@ -86,14 +89,15 @@ public class TransformView extends AbstractView {
response.setCharacterEncoding("ASCII");
factory.export(properties, content, outputStream, null);
} else if (exportFormat == ExportFormat.WISEMAPPING) {
response.setCharacterEncoding("UTF-8");
response.setCharacterEncoding(DEFAULT_ENCODING);
final Object mindmap = viewMap.get("mindmap");
final StreamResult result = new StreamResult(outputStream);
jaxbMarshaller.marshal(mindmap, result);
} else if (exportFormat == ExportFormat.MICROSOFT_EXCEL || exportFormat == ExportFormat.TEXT || exportFormat == ExportFormat.OPEN_OFFICE_WRITER || exportFormat == ExportFormat.MINDJET) {
response.setCharacterEncoding("UTF-8");
response.setCharacterEncoding(DEFAULT_ENCODING);
factory.export(properties, content, outputStream, null);
} else {
// Image export ...
factory.export(properties, null, outputStream, content);
}
} catch (Throwable e) {

4
wise-webapp/src/test/java/com/wisemapping/test/export/ExportSVGBasedTest.java
View File

@ -96,6 +96,10 @@ public class ExportSVGBasedTest {
}
});
if(svgFile==null){
throw new IllegalArgumentException("Wrong based path specified. Change based path...");
}
final Object[][] result = new Object[svgFile.length][4];
for (int i = 0; i < svgFile.length; i++) {
File freeMindFile = svgFile[i];

276
wise-webapp/src/test/resources/data/svg/export-exp.svg Normal file
View File

@ -0,0 +1,276 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" focusable="true" height="345.0" id="workspace" preserveAspectRatio="xMinYMin" viewBox="-595.0 -169.0 1191.0 345.0" width="1191.0">
<path stroke="#3f96ff" stroke-opacity="1" stroke-width="2px" style="fill:none " visibility="hidden"/>
<path d="M-200,-36 L-195.70774292476682,-31.807562856748987M-200,-36 L-204.19243714325103,-31.70774292476682" stroke="#9b74e6" stroke-opacity="1" stroke-width="2px" visibility="visible"/>
<path d="M-265,72 C-274,72 -285,107 -294,107" fill="#495879" fill-opacity="1" stroke="#495879" stroke-opacity="1" stroke-width="1px" style="fill:none " visibility="visible"/>
<path d="M-265,72 C-274,72 -285,82 -294,82" fill="#495879" fill-opacity="1" stroke="#495879" stroke-opacity="1" stroke-width="1px" style="fill:none " visibility="visible"/>
<path d="M-265,72 C-274,72 -285,57 -294,57" fill="#495879" fill-opacity="1" stroke="#495879" stroke-opacity="1" stroke-width="1px" style="fill:none " visibility="visible"/>
<path d="M-265,72 C-274,72 -285,32 -294,32" fill="#495879" fill-opacity="1" stroke="#495879" stroke-opacity="1" stroke-width="1px" style="fill:none " visibility="visible"/>
<path d="M0,0 C-44,0 -89,72 -133,72 -89,75 -44,5 0,7 Z" fill="#495879" fill-opacity="1" stroke="#495879" stroke-opacity="1" stroke-width="1px" style="fill:#495879 " visibility="visible"/>
<path d="M180,97 C189,97 200,120 209,120" fill="#495879" fill-opacity="1" stroke="#495879" stroke-opacity="1" stroke-width="1px" style="fill:none " visibility="visible"/>
<path d="M180,97 C189,97 200,95 209,95" fill="#495879" fill-opacity="1" stroke="#495879" stroke-opacity="1" stroke-width="1px" style="fill:none " visibility="visible"/>
<path d="M180,97 C189,97 199,70 208,70" fill="#495879" fill-opacity="1" stroke="#495879" stroke-opacity="1" stroke-width="1px" style="fill:none " visibility="visible"/>
<path d="M0,0 C44,0 89,97 133,97 89,100 44,5 0,7 Z" fill="#495879" fill-opacity="1" stroke="#495879" stroke-opacity="1" stroke-width="1px" style="fill:#495879 " visibility="visible"/>
<path d="M-268,-41 C-277,-41 -288,8 -297,8" fill="#495879" fill-opacity="1" stroke="#495879" stroke-opacity="1" stroke-width="1px" style="fill:none " visibility="visible"/>
<path d="M-268,-41 C-277,-41 -288,-17 -297,-17" fill="#495879" fill-opacity="1" stroke="#495879" stroke-opacity="1" stroke-width="1px" style="fill:none " visibility="visible"/>
<path d="M-268,-41 C-277,-41 -288,-42 -297,-42" fill="#495879" fill-opacity="1" stroke="#495879" stroke-opacity="1" stroke-width="1px" style="fill:none " visibility="visible"/>
<path d="M-268,-41 C-277,-41 -288,-67 -297,-67" fill="#495879" fill-opacity="1" stroke="#495879" stroke-opacity="1" stroke-width="1px" style="fill:none " visibility="visible"/>
<path d="M-268,-41 C-277,-41 -288,-92 -297,-92" fill="#495879" fill-opacity="1" stroke="#495879" stroke-opacity="1" stroke-width="1px" style="fill:none " visibility="visible"/>
<path d="M0,0 C-44,0 -89,-41 -133,-41 -89,-38 -44,5 0,7 Z" fill="#495879" fill-opacity="1" stroke="#495879" stroke-opacity="1" stroke-width="1px" style="fill:#495879 " visibility="visible"/>
<path d="M271,-28 C281,-28 292,38 302,38" fill="#495879" fill-opacity="1" stroke="#495879" stroke-opacity="1" stroke-width="1px" style="fill:none " visibility="visible"/>
<path d="M411,-4 C420,-4 430,20 439,20" fill="#495879" fill-opacity="1" stroke="#495879" stroke-opacity="1" stroke-width="1px" style="fill:none " visibility="visible"/>
<path d="M411,-4 C420,-4 431,-4 440,-4" fill="#495879" fill-opacity="1" stroke="#495879" stroke-opacity="1" stroke-width="1px" style="fill:none " visibility="visible"/>
<path d="M411,-4 C420,-4 431,-29 440,-29" fill="#495879" fill-opacity="1" stroke="#495879" stroke-opacity="1" stroke-width="1px" style="fill:none " visibility="visible"/>
<path d="M271,-28 C280,-28 291,-4 300,-4" fill="#495879" fill-opacity="1" stroke="#495879" stroke-opacity="1" stroke-width="1px" style="fill:none " visibility="visible"/>
<path d="M271,-28 C280,-28 290,-54 299,-54" fill="#495879" fill-opacity="1" stroke="#495879" stroke-opacity="1" stroke-width="1px" style="fill:none " visibility="visible"/>
<path d="M271,-28 C280,-28 290,-79 299,-79" fill="#495879" fill-opacity="1" stroke="#495879" stroke-opacity="1" stroke-width="1px" style="fill:none " visibility="visible"/>
<path d="M271,-28 C280,-28 290,-104 299,-104" fill="#495879" fill-opacity="1" stroke="#495879" stroke-opacity="1" stroke-width="1px" style="fill:none " visibility="visible"/>
<path d="M0,0 C44,0 90,-28 134,-28 90,-25 44,5 0,7 Z" fill="#495879" fill-opacity="1" stroke="#495879" stroke-opacity="1" stroke-width="1px" style="fill:#495879 " visibility="visible"/>
<rect fill="#CC0033" fill-opacity="0.4" height="6" rx="0" ry="0" stroke="#FF9933" stroke-opacity="0.4" stroke-width="1px" visibility="hidden" width="50" x="5" y="5"/>
<path fill-opacity="0.4" stroke="#CC0033" stroke-opacity="0.4" stroke-width="1px" style="fill:none " visibility="hidden"/>
<path fill-opacity="0.4" stroke="#CC0033" stroke-opacity="0.4" stroke-width="1px" style="fill:none " visibility="hidden"/>
<rect fill="#CC0033" fill-opacity="0.4" height="6" rx="0" ry="0" stroke="#FF9933" stroke-opacity="0.4" stroke-width="1px" visibility="hidden" width="50" x="5" y="5"/>
<g focusable="true" height="100" preserveAspectRatio="none" transform="translate(-103,-19) scale(1,1)" visibility="visible" width="100">
<rect fill="rgb(244,184,45)" fill-opacity="1" height="44" rx="6.6" ry="6.6" stroke="rgb(241,163,39)" stroke-opacity="1" stroke-width="1px" style="cursor: default;" width="211" x="-2" y="-3"/>
<rect fill="#0a0a08" height="38" rx="5.7" ry="5.7" stroke="rgb(57,113,177)" stroke-width="2px" style="cursor: default;" width="207" x="0" y="0"/>
<text fill="#eeeeee" font-family="verdana" font-size="13.4375" font-style="normal" font-weight="bold" style="cursor: default;" visibility="visible" x="31" y="11">
<tspan dy="1em" x="31">Comment démarrer ?</tspan>
</text>
<g focusable="true" height="16" preserveAspectRatio="none" transform="translate(11,11) scale(0.16,0.16)" width="16">
<image height="90" preserveAspectRatio="none" style="cursor: pointer;" width="90" x="5" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0&#10;U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAKkSURBVDjLpZPdT5JhGMb9W+BPaK3matVq&#10;ndXWOOigA6fmJ9DUcrUMlrN0mNMsKTUznQpq6pyKAm8CIogmypcg8GIiX8rHRHjhVbPt6o01nMvZ&#10;Wge/k3vP9duuZ/edAyDnf/hjoCMP2Vr3gUDj3CdV6zT1xZ6iFDaKnLEkBFOmPfaZArWT5sw60iFP&#10;+BAbOzTcQSqDZzsNRyCNkcVoaGghzDlVQKylOHJrMrUZ2Yf52y6kc36IxpyoH1lHF7EBgyMKV4jC&#10;J5U/1UVscU4IZOYEa3I1HtwI01hwxlDLhDoJD/wxGr5YGmOLAdRIrVCuhmD3JdA6SQabx12srGB0&#10;KSpc86ew4olDOGjH4x4z0gdHDD9+c4TaQQtq+k2Yt0egXYugTmoVZgV9cyHSxXTtJjZR3WNCVfcK&#10;/NE0ppYDUNu2QTMCtS0IbrsOrVMOWL27eNJtJLOCDoWXdgeTEEosqPxoBK/TwDzWY9rowy51gJ1d&#10;Gr2zLpS2aVH5QQ+Hbw88sZ7OClrGXbQrkMTTAQu4HXqUv9eh7J0OSfo7tiIU+GItilpUuM/AF2tg&#10;98eR36Q+FryQ2kjbVhximQu8dgPKxPMoeTuH4tfqDIWvCBQ2KlDQKEe9dBlGTwR36+THFZg+QoUx&#10;AL0jgsoOQzYYS+wjskcjTzSToVAkA7Hqg4Spc6tm4vgT+eIFVvmb+eCSMwLlih/cNg0KmpRoGzdl&#10;+BXOb5jAsMYNjSWAm9VjwesPR1knFilPNMu510CkdPZtqK1BvJQsoaRZjqLGaTzv1UNp9EJl9uNq&#10;xefU5QdDnFNX+Y5Qxrn9bDLUR6zjqzsMizeWYdG5gy6ZDbk8aehiuYRz5jHdeDTKvlY1IrhSMUxe&#10;4g9SuVwpdaFsgDxf2i84V9zH/us1/is/AdevBaK9Tb3EAAAAAElFTkSuQmCC" y="5"> </image>
</g>
</g>
<g focusable="true" height="100" preserveAspectRatio="none" transform="translate(134,-46) scale(1,1)" visibility="visible" width="100">
<rect fill="rgb(252,235,192)" fill-opacity="0" height="24" rx="3.5999999999999996" ry="3.5999999999999996" stroke="rgb(241,163,39)" stroke-opacity="0" stroke-width="1px" width="140" x="-2" y="-3"/>
<line stroke="#495879" stroke-opacity="1" stroke-width="1px" style="cursor: move;" x1="0" x2="136" y1="18" y2="18"/>
<text fill="#444444" font-family="verdana" font-size="10.75" font-style="normal" font-weight="normal" style="cursor: move;" visibility="visible" x="18" y="3">
<tspan dy="1em" x="18">Propriétés des noeuds</tspan>
</text>
<g focusable="true" height="12" preserveAspectRatio="none" transform="translate(3,3) scale(0.12,0.12)" width="12">
<image height="90" preserveAspectRatio="none" style="cursor: pointer;" width="90" x="5" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0&#10;U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHdSURBVDjLpZNraxpBFIb3a0ggISmmNISW&#10;XmOboKihxpgUNGWNSpvaS6RpKL3Ry//Mh1wgf6PElaCyzq67O09nVjdVlJbSDy8Lw77PmfecMwZg&#10;/I/GDw3DCo8HCkZl/RlgGA0e3Yfv7+DbAfLrW+SXOvLTG+SHV/gPbuMZRnsyIDL/OASziMxkkKkU&#10;QTJJsLaGn8/iHz6nd+8mQv87Ahg2H9Th/BxZqxEkEgSrq/iVCvLsDK9awtvfxb2zjD2ARID+lVVl&#10;babTgWYTv1rFL5fBUtHbbeTJCb3EQ3ovCnRC6xAgzJtOE+ztheYIEkqbFaS3vY2zuIj77AmtYYDu&#10;sPy8/zuvunJkDKXM7tYWTiyGWFjAqeQnAD6+7ueNx/FLpRGAru7mcoj5ebqzszil7DggeF/DX1nB&#10;N82rzPqrzbRayIsLhJqMPT2N83Sdy2GApwFqRN7jFPL0tF+10cDd3MTZ2AjNUkGCoyO6y9cRxfQo&#10;wFUbpufr1ct4ZoHg+Dg067zduTmEbq4yi/UkYidDe+kaTcP4ObJIajksPd/eyx3c+N2rvPbMDPbU&#10;FPZSLKzcGjKPrbJaDsu+dQO3msfZzeGY2TCvKGYQhdSYeeJjUt21dIcjXQ7U7Kv599f4j/oF55W4&#10;g/2e3b8AAAAASUVORK5CYII=" y="5"> </image>
</g>
<ellipse cx="139" cy="18" fill="#250be3" height="6" rx="3" ry="3" stroke="#080559" stroke-width="1px" style="cursor: default;" visibility="visible" width="6"/>
</g>
<g focusable="true" height="100" preserveAspectRatio="none" transform="translate(299,-119) scale(1,1)" visibility="visible" width="100">
<rect fill="rgb(252,235,192)" fill-opacity="0" height="21" rx="3.15" ry="3.15" stroke="rgb(241,163,39)" stroke-opacity="0" stroke-width="1px" width="175" x="-2" y="-3"/>
<line stroke="#495879" stroke-opacity="1" stroke-width="1px" style="cursor: move;" x1="0" x2="171" y1="15" y2="15"/>
<text fill="#444444" font-family="verdana" font-size="8.0625" font-style="normal" font-weight="normal" style="cursor: move;" visibility="visible" x="14.25" y="3">
<tspan dy="1em" x="14.25">Ajouter des liens vers des pages web</tspan>
</text>
<g focusable="true" height="9" preserveAspectRatio="none" transform="translate(3,3) scale(0.09,0.09)" width="9">
<image data-original-title="" height="90" preserveAspectRatio="none" style="cursor: pointer;" title="" width="90" x="5" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAEFCu8CAAADHmlDQ1BJQ0MgUHJvZmlsZQAAeAGF&#10;VN9r01AU/tplnbDhizpnEQk+aJFuZFN0Q5y2a1e6zVrqNrchSJumbVyaxiTtfrAH2YtvOsV38Qc+&#10;+QcM2YNve5INxhRh+KyIIkz2IrOemzRNJ1MDufe73/nuOSfn5F6g+XFa0xQvDxRVU0/FwvzE5BTf&#10;8gFeHEMr/GhNi4YWSiZHQA/Tsnnvs/MOHsZsdO5v36v+Y9WalQwR8BwgvpQ1xCLhWaBpXNR0E+DW&#10;ie+dMTXCzUxzWKcECR9nOG9jgeGMjSOWZjQ1QJoJwgfFQjpLuEA4mGng8w3YzoEU5CcmqZIuizyr&#10;RVIv5WRFsgz28B9zg/JfsKiU6Zut5xCNbZoZTtF8it4fOX1wjOYA1cE/Xxi9QbidcFg246M1fkLN&#10;JK4RJr3n7nRpmO1lmpdZKRIlHCS8YlSuM2xp5gsDiZrm0+30UJKwnzS/NDNZ8+PtUJUE6zHF9fZL&#10;RvS6vdfbkZMH4zU+pynWf0D+vff1corleZLw67QejdX0W5I6Vtvb5M2mI8PEd1E/A0hCgo4cZCjg&#10;kUIMYZpjxKr4TBYZIkqk0ml0VHmyONY7KJOW7RxHeMlfDrheFvVbsrj24Pue3SXXjrwVhcW3o9hR&#10;7bWB6bqyE5obf3VhpaNu4Te55ZsbbasLCFH+iuWxSF5lyk+CUdd1NuaQU5f8dQvPMpTuJXYSWAy6&#10;rPBe+CpsCk+FF8KXv9TIzt6tEcuAcSw+q55TzcbsJdJM0utkuL+K9ULGGPmQMUNanb4kTZyKOfLa&#10;UAsnBneC6+biXC/XB567zF3h+rkIrS5yI47CF/VFfCHwvjO+Pl+3b4hhp9u+02TrozFa67vTkbqi&#10;sXqUj9sn9j2OqhMZsrG+sX5WCCu0omNqSrN0TwADJW1Ol/MFk+8RhAt8iK4tiY+rYleQTysKb5kM&#10;XpcMSa9I2S6wO4/tA7ZT1l3maV9zOfMqcOkb/cPrLjdVBl4ZwNFzLhegM3XkCbB8XizrFdsfPJ63&#10;gJE722OtPW1huos+VqvbdC5bHgG7D6vVn8+q1d3n5H8LeKP8BqkjCtbCoV8yAAAACXBIWXMAAAsT&#10;AAALEwEAmpwYAAABZGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4&#10;PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNC40LjAiPgogICA8cmRmOlJERiB4&#10;bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgog&#10;ICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9&#10;Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iPgogICAgICAgICA8eG1wOkNyZWF0b3JUb29s&#10;PkFkb2JlIEltYWdlUmVhZHk8L3htcDpDcmVhdG9yVG9vbD4KICAgICAgPC9yZGY6RGVzY3JpcHRp&#10;b24+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+Chvleg4AAAVfSURBVEgNtVZbTJRXEP7+7XLH&#10;haVRihYMCKRiwKIUi6iAEUStRlCUW6khGpsYm2gVm3pBTSpYSEkfFBIg+gAYIi80BR7QIMoLptxC&#10;UlMwlU2AKFglgLvIbTsz5N8ssFuCSWdz/j2XuZz5Zs6co5jNZty7d68JKlVWVta/f//eHBUVZeZ/&#10;DS88ftyM3NxcjI+PQ8sT69eH8B9MJhOUqqoqi7zCMrwSExMDpa2tzcwsoaGhUPr7+2WFV8Fmpqen&#10;zbaamDQajWhoaEBqaqpYOXv2DHhOYUmtVrPn+fO/odOtwJEjRzE7OytaebFYUZTPZGT1mZmZuaaw&#10;Las5S3dyanJCQxxQ29jYGNk9KmPhIr/No6Oj5rq6381FRb9Iv6amxmw0GU2aqakpXL58CW/fjqCv&#10;r0/6cXFxIqglODAxMYGHDx8gLy8fjPfk5CRcXF2gDAwM0Hjxnrw+9ppARUVFNfllXk4bGRkZ1ZL/&#10;K9iT5ZCjk6ODwM57s24MBXmOzMwMFBT8jHfv3uHcue9RV1cnfGxEMoLAFeeePHmCBw8aERQUjOHh&#10;IWGKiYnF/v1fYdOmTWBkGDGyOCfI1oqKiuBKiFy8eAmvX79Gfn4eEhISUFJSgtra38DKGUkmFpQk&#10;2Llz5x6eePToEbq6OrF5cwS2bdsmu+D5heSp95xgwd3bt2+/q9Pp3BYy2Bs3NTV1iyAh+4M9Jhvz&#10;nWlpaWcUQszk4uLibIPB7hSdyDKto6OjVk1su5yLFzwkHLbSajHv/BkRtGfxypUr6O3tkTN49eo1&#10;hIeHg/AQDZYEsNbHteLmzXw5RAUFhRSiLty9e2euFlgLWucqZ8eBAwdE6PTp77By5UpwCjo5Ocmc&#10;RiNZCvnyVrnt3p2AU6dO4c2bf5CV9Q1l0Y/gNGxvb8PhwynCoxoRQR7s27cXkZGRSE5OxqpVq1Bc&#10;fBu+vr6or69DUlISQkJCxKIKpPjIghEREWAAOG97e3vh4eGB2Ng4uLu7W4QYh0WCPJmdnS2JHBQU&#10;iJycC3BwcBAr6vaYRyVLHM+fz0FZWSk0GgUnTpwUzXwiFpIaunlxPH78hPDZsqAqsMSRCu4fO3bs&#10;2KAuLPVP9WaM/PyVr4C01atXX9i4caO/p6enbinBD1mn8L7t6Oh88fLly1wNWf06Ojp6A6GvY6T/&#10;j6bXe+m3Rm8NIXiyBFPe9X/h+CFe2ZOxGGTPlktcYFtaWtDa2iq108/PF7t2xYNCZFeVxeByPOQb&#10;mYu1wWCAj4+PnFM3N3d0d3ejo6OD7kMDSktLodfrxbB6fnlgMch5a8/L9vZ23L9/H+np6XQT1JLC&#10;F/D29parJCMjE15eXiI7MDiA27duITBwHRobG3Ho0CExyLoVOjdMc6WDOuzhwtbc3Iz4+Hg8ffoU&#10;iYmJUrpMJiMd7VhQHcerV3N3GR88fpd8e/KkKHV2dkZU1Jfz9MkCfWx6yHG5ceMnKT6RkV+IJ8+e&#10;/Ym1a9fC3z8Aa9Z8ivLycroPXdHT00Ovhjy4ubkiLCyMClOy8PPm1dNuE1JmYEiLi4vlFuZKt3fv&#10;HmzZEiUJERgYiMHBQYkNl0mOD2+Gzha02o9w8GCSVHj2lgudPbJ4aL0jLiczM7NUTv3k7TM8PIzr&#10;16+DL0E2FBT0uXjC1dPPz08KPmcsv5NsETviRD+meQZ54dixY5IgBkMfCgsLMTQ0TJn4CaW6DwIC&#10;1iElJUXuKeYNDg4WJepTQgZLfCwGWQE3xpsfpXwlabVai3KGihWrfEvonbfMMiqxQQNdnkZKAJ01&#10;JAwRN2uyDr71/FJ9epBgbHTMSHwGha1XV1evJw8OUuwClhL+wPW/SK6WznHvv7DidtGxUfAhAAAA&#10;AElFTkSuQmCC" y="5"> </image>
</g>
<ellipse cx="3" cy="3" fill="rgb(224,229,239)" height="6" rx="3" ry="3" stroke="rgb(2,59,185)" stroke-width="1px" style="cursor: default;" visibility="hidden" width="6"/>
</g>
<g focusable="true" height="100" preserveAspectRatio="none" transform="translate(299,-94) scale(1,1)" visibility="visible" width="100">
<rect fill="rgb(252,235,192)" fill-opacity="0" height="21" rx="3.15" ry="3.15" stroke="rgb(241,163,39)" stroke-opacity="0" stroke-width="1px" width="81" x="-2" y="-3"/>
<line stroke="#495879" stroke-opacity="1" stroke-width="1px" style="cursor: move;" x1="0" x2="77" y1="15" y2="15"/>
<text fill="rgb(82,92,97)" font-family="verdana" font-size="8.0625" font-style="normal" font-weight="normal" style="cursor: move;" visibility="visible" x="14.25" y="3">
<tspan dy="1em" x="14.25">Ajouter Notes</tspan>
</text>
<g focusable="true" height="9" preserveAspectRatio="none" transform="translate(3,3) scale(0.09,0.09)" width="9">
<image data-original-title="" height="90" preserveAspectRatio="none" style="cursor: pointer;" title="" width="90" x="5" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAEFCu8CAAADHmlDQ1BJQ0MgUHJvZmlsZQAAeAGF&#10;VN9r01AU/tplnbDhizpnEQk+aJFuZFN0Q5y2a1e6zVrqNrchSJumbVyaxiTtfrAH2YtvOsV38Qc+&#10;+QcM2YNve5INxhRh+KyIIkz2IrOemzRNJ1MDufe73/nuOSfn5F6g+XFa0xQvDxRVU0/FwvzE5BTf&#10;8gFeHEMr/GhNi4YWSiZHQA/Tsnnvs/MOHsZsdO5v36v+Y9WalQwR8BwgvpQ1xCLhWaBpXNR0E+DW&#10;ie+dMTXCzUxzWKcECR9nOG9jgeGMjSOWZjQ1QJoJwgfFQjpLuEA4mGng8w3YzoEU5CcmqZIuizyr&#10;RVIv5WRFsgz28B9zg/JfsKiU6Zut5xCNbZoZTtF8it4fOX1wjOYA1cE/Xxi9QbidcFg246M1fkLN&#10;JK4RJr3n7nRpmO1lmpdZKRIlHCS8YlSuM2xp5gsDiZrm0+30UJKwnzS/NDNZ8+PtUJUE6zHF9fZL&#10;RvS6vdfbkZMH4zU+pynWf0D+vff1corleZLw67QejdX0W5I6Vtvb5M2mI8PEd1E/A0hCgo4cZCjg&#10;kUIMYZpjxKr4TBYZIkqk0ml0VHmyONY7KJOW7RxHeMlfDrheFvVbsrj24Pue3SXXjrwVhcW3o9hR&#10;7bWB6bqyE5obf3VhpaNu4Te55ZsbbasLCFH+iuWxSF5lyk+CUdd1NuaQU5f8dQvPMpTuJXYSWAy6&#10;rPBe+CpsCk+FF8KXv9TIzt6tEcuAcSw+q55TzcbsJdJM0utkuL+K9ULGGPmQMUNanb4kTZyKOfLa&#10;UAsnBneC6+biXC/XB567zF3h+rkIrS5yI47CF/VFfCHwvjO+Pl+3b4hhp9u+02TrozFa67vTkbqi&#10;sXqUj9sn9j2OqhMZsrG+sX5WCCu0omNqSrN0TwADJW1Ol/MFk+8RhAt8iK4tiY+rYleQTysKb5kM&#10;XpcMSa9I2S6wO4/tA7ZT1l3maV9zOfMqcOkb/cPrLjdVBl4ZwNFzLhegM3XkCbB8XizrFdsfPJ63&#10;gJE722OtPW1huos+VqvbdC5bHgG7D6vVn8+q1d3n5H8LeKP8BqkjCtbCoV8yAAAACXBIWXMAAAsT&#10;AAALEwEAmpwYAAABZGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4&#10;PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNC40LjAiPgogICA8cmRmOlJERiB4&#10;bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgog&#10;ICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9&#10;Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iPgogICAgICAgICA8eG1wOkNyZWF0b3JUb29s&#10;PkFkb2JlIEltYWdlUmVhZHk8L3htcDpDcmVhdG9yVG9vbD4KICAgICAgPC9yZGY6RGVzY3JpcHRp&#10;b24+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+Chvleg4AAAPYSURBVEgNtVZLaFNBFL0vfU1N&#10;qvlJESsiurFabHFroVsXiv8WU63/DyIudOEHhSIIolY0qBV/aLFNDQXBjfVbtW6FVlyJCym20FLT&#10;pr80TdLGOTfMc/pM0qTgDfMyM/eee+7cuTPvaYlEglpaWj6QlObm5pfe3fsTk5OT3HQobvvqaWxs&#10;jG14YmJiQgJI8/v9Bl4DbtPWnVRUtJC0YDCYgF1N7SHSenp6eMBA0MTj8USqxgzhcJiqdu41WNBp&#10;fdZIFnTGx8fxN0Mwpwm3dzVNK5mhEYOpqamLGrjMCoyjsWjEIizo69dvtGFTFTeM0SCaWHtie3Ut&#10;D+QDwej5ekSPxWI853/6UOoIc0JJukgHTyIDUp48aiCb3UZab2+vyP+/MXkWeiLU1NQUmJ6eTuTS&#10;QqHQiC7Wv0BGLiln+7cWWPM5s9FolNA2bq7mpvY/fvxEb96+N+ahg/B+ieSSupZtVbsN0vobd4y+&#10;zJZgTALhRQUalqaOZAOQQwUj2vmzp0ymf4eLFxWxDewgCNUnQljrcDgKy8rWUMD/mBWZHq9fvf6G&#10;ylovMns2k6FJ1+X1ek9qoi4nbDbbPJMy41CcyIe61WrVxeZnNEyhdPJ2ZJNRM5iBkvHgkeP06H5y&#10;33CePR4XDQ6GGHP18kUqKVlJIh88NrYDZ3BgIEgdHZ/p3fsPrAToeWsT90+fq/tnO/iUyXpVKwUI&#10;tYpgY7EwV7JyEKoMl92necBG5oPXCE9oLpeTGm5dTwnDgYVNXl4e6xXgNIVCw3ynpUSKSQBTMqYD&#10;yHkApfBK4cVqzScUcjqpu3Ca2WQuNFHgsf7+fg45HUidxxrb29tb9ba2ti+VlZWlqjJTX9w3oyJC&#10;H14B3uLi4jPl5eXLXS6XIxNorrrBweBQZ2fXz76+vjqLYK2tqKgodTqdDuTofzS32+NeV7FutSjz&#10;PUYu1R2a60qywSXrXFjOtjLc1OlsMukkRgaTdoWHj56ggd9Bml9op6eND9gel7H6QkynW7Z0Cflu&#10;XpMcxvnFhEGonk+8L0EGGRsP09Ydu7ivkmXSdf/q5dPHIPGAb82SvKYMQvV4yv10u510r8EncVn9&#10;V3v3sZ30gQHuRN2SpDII1RXKUzo0NEzSAXvJ4SF9ACKvRPQNwlQrhMFcRV2h6mMGoYwqHk9eYi6n&#10;g3w3rqj2s/b3HjjGNvKFjQEqtUD8IDMIoYDkiy8t+X6SDliR5QOXqwzeDDEIzeel/sols21OYxk8&#10;QGofhN3igzNst9sdkUgkJ6fZGosPEhodGQ2DSwN7IBBYJXK+RZTvimyd5Gj3Xdi/qKmp+fEHbZXX&#10;tR3PbEMAAAAASUVORK5CYII=" y="5"> </image>
</g>
<ellipse cx="3" cy="3" fill="rgb(224,229,239)" height="6" rx="3" ry="3" stroke="rgb(2,59,185)" stroke-width="1px" style="cursor: default;" visibility="hidden" width="6"/>
</g>
<g focusable="true" height="100" preserveAspectRatio="none" transform="translate(299,-69) scale(1,1)" visibility="visible" width="100">
<rect fill="rgb(252,235,192)" fill-opacity="0" height="21" rx="3.15" ry="3.15" stroke="rgb(241,163,39)" stroke-opacity="0" stroke-width="1px" width="89" x="-2" y="-3"/>
<line stroke="#495879" stroke-opacity="1" stroke-width="1px" style="cursor: move;" x1="0" x2="85" y1="15" y2="15"/>
<text fill="rgb(82,92,97)" font-family="verdana" font-size="8.0625" font-style="normal" font-weight="normal" style="cursor: move;" visibility="visible" x="14.25" y="3">
<tspan dy="1em" x="14.25">Icônes fantaisie</tspan>
</text>
<g focusable="true" height="9" preserveAspectRatio="none" transform="translate(3,3) scale(0.09,0.09)" width="9">
<image height="90" preserveAspectRatio="none" style="cursor: pointer;" width="90" x="5" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBI&#10;WXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH1QsHFBsZslJGYgAAADV0RVh0Q29tbWVudAAoYykgMjAw&#10;NCBKYWt1YiBTdGVpbmVyCgpDcmVhdGVkIHdpdGggVGhlIEdJTVCQ2YtvAAAC3klEQVQ4y6WTT2iT&#10;ZxzHP8/zvnnTWE1ramJtRYZTbGvNQGPMtG5CJyx0giC1sIPSy3rpyhC9DWSwyyhsjE4whzG8CNKp&#10;B/WioNNBW7qsrlXpSAejKmZGm6aubd5/eR4PQZz2uO/59/vy5ftH8BbG++mVvuwWrkjgiwgmRW2p&#10;rAownBxSP719L/7zGJeOyDQmu1IN+3oIRFtB1oI7j/f0PnOjF/nn7o0xZam+5A9MvUEw3k/cWBQ3&#10;WgbOxIKRNaj5WwjDBG2C76JdF+pSOMUSuR+/LKgwB3d/r6YAJIB0yLR8PhQLWLNo+x4i/C6E34E1&#10;GyG8CVG3GZamsfQsW4+fjomyyrxSIMf76W3c9XHKWlsLBhCsBVWBZRcR3s7A17e5mc0j1+0EQxMM&#10;h1jftj/1+wmzF0BKj+6GjqOohRGEATd/fcJ35yZJ9JwHUzIy8YjJ3HMwLMBBF+4QSX6CLle6AUzh&#10;kAhE21CP7yAMi86D7XQe2syJkwKosDexic7Oj6p2acBfJhBrQ5R1ouqBT8RXS2ivxPTMU6j4rzOy&#10;HzI0OMB7LTH0wj1yfz8DuwjB1eATATAxKZq6JlpxXnDt9nVG/0iT2l2gcX0d5bLHn9NTROsCnD2f&#10;5XBHM1siS2i7BCZFAFPXkHXzE2npuBxJf8ijJyUuXfmFyZzHbN6hOVZL+7YmetJx2hKHEMVb+PkH&#10;6JDIgsakxhieG7mYjn5wgOZnP7MuHiG15wBmaDtSbEDUNIFvoxdmUM9/QxmrmBu9iggZw+BXi5T9&#10;jNFtn55OWd59KsuTYFoIKZG+Cb6Hdm2UXY3VDe1g5vLgWCLD+6+LVG/15c59VXCMVoymY8hFjSgt&#10;oV/Moxb/BVcgtxzDW9XOXxcGC7I+2LdiCxOnrLhacDOx1o5UQ7ILM9aKCIbBKeHlHzA3fo3CzNiY&#10;rA/27fzGmVpB8ArZL4xe7Eq3sEngU11jSGRFyBje9a2/Yo3/Gy8BotwjCASHqZ0AAAAASUVORK5C&#10;YII=" y="5"> </image>
</g>
<ellipse cx="3" cy="3" fill="rgb(224,229,239)" height="6" rx="3" ry="3" stroke="rgb(2,59,185)" stroke-width="1px" style="cursor: default;" visibility="hidden" width="6"/>
</g>
<g focusable="true" height="100" preserveAspectRatio="none" transform="translate(300,-19) scale(1,1)" visibility="visible" width="100">
<rect fill="rgb(252,235,192)" fill-opacity="0" height="21" rx="3.15" ry="3.15" stroke="rgb(241,163,39)" stroke-opacity="0" stroke-width="1px" width="114" x="-2" y="-3"/>
<line stroke="#495879" stroke-opacity="1" stroke-width="1px" style="cursor: move;" x1="0" x2="110" y1="15" y2="15"/>
<text fill="rgb(82,92,97)" font-family="verdana" font-size="8.0625" font-style="normal" font-weight="normal" style="cursor: move;" visibility="visible" x="3" y="3">
<tspan dy="1em" x="3">Multiples Styles de Texte</tspan>
</text>
<ellipse cx="113" cy="15" fill="rgb(224,229,239)" height="6" rx="3" ry="3" stroke="rgb(2,59,185)" stroke-width="1px" style="cursor: default;" visibility="visible" width="6"/>
<g focusable="true" height="9" preserveAspectRatio="none" transform="translate(0,3) scale(0,0.09)" width="0"/>
</g>
<g focusable="true" height="100" preserveAspectRatio="none" transform="translate(440,-44) scale(1,1)" visibility="visible" width="100">
<rect fill="rgb(252,235,192)" fill-opacity="0" height="21" rx="3.15" ry="3.15" stroke="rgb(241,163,39)" stroke-opacity="0" stroke-width="1px" width="106" x="-2" y="-3"/>
<line stroke="#495879" stroke-opacity="1" stroke-width="1px" style="cursor: move;" x1="0" x2="102" y1="15" y2="15"/>
<text fill="#ff0000" font-family="verdana" font-size="8.0625" font-style="normal" font-weight="normal" style="cursor: move;" visibility="visible" x="3" y="3">
<tspan dy="1em" x="3">Couleurs de caractères</tspan>
</text>
<ellipse cx="3" cy="3" fill="rgb(224,229,239)" height="6" rx="3" ry="3" stroke="rgb(2,59,185)" stroke-width="1px" style="cursor: default;" visibility="hidden" width="6"/>
<g focusable="true" height="9" preserveAspectRatio="none" transform="translate(0,3) scale(0,0.09)" width="0"/>
</g>
<g focusable="true" height="100" preserveAspectRatio="none" transform="translate(440,-19) scale(1,1)" visibility="visible" width="100">
<rect fill="rgb(252,235,192)" fill-opacity="0" height="21" rx="3.15" ry="3.15" stroke="rgb(241,163,39)" stroke-opacity="0" stroke-width="1px" width="104" x="-2" y="-3"/>
<line stroke="#495879" stroke-opacity="1" stroke-width="1px" style="cursor: move;" x1="0" x2="100" y1="15" y2="15"/>
<text fill="rgb(82,92,97)" font-family="verdana" font-size="8.0625" font-style="italic" font-weight="bold" style="cursor: move;" visibility="visible" x="3" y="3">
<tspan dy="1em" x="3">Styles de caractères</tspan>
</text>
<ellipse cx="3" cy="3" fill="rgb(224,229,239)" height="6" rx="3" ry="3" stroke="rgb(2,59,185)" stroke-width="1px" style="cursor: default;" visibility="hidden" width="6"/>
<g focusable="true" height="9" preserveAspectRatio="none" transform="translate(0,3) scale(0,0.09)" width="0"/>
</g>
<g focusable="true" height="100" preserveAspectRatio="none" transform="translate(439,5) scale(1,1)" visibility="visible" width="100">
<rect fill="rgb(252,235,192)" fill-opacity="0" height="21" rx="3.15" ry="3.15" stroke="rgb(241,163,39)" stroke-opacity="0" stroke-width="1px" width="77" x="-2" y="-3"/>
<line stroke="#495879" stroke-opacity="1" stroke-width="1px" style="cursor: move;" x1="0" x2="73" y1="15" y2="15"/>
<text fill="rgb(82,92,97)" font-family="times" font-size="8.0625" font-style="normal" font-weight="normal" style="cursor: move;" visibility="visible" x="3" y="3">
<tspan dy="1em" x="3">Types de caractères</tspan>
</text>
<ellipse cx="3" cy="3" fill="rgb(224,229,239)" height="6" rx="3" ry="3" stroke="rgb(2,59,185)" stroke-width="1px" style="cursor: default;" visibility="hidden" width="6"/>
<g focusable="true" height="9" preserveAspectRatio="none" transform="translate(0,3) scale(0,0.09)" width="0"/>
</g>
<g focusable="true" height="100" preserveAspectRatio="none" transform="translate(300,30) scale(1,1)" visibility="visible" width="100">
<rect fill="rgb(252,235,192)" fill-opacity="0" height="21" rx="3.15" ry="3.15" stroke="rgb(241,163,39)" stroke-opacity="0" stroke-width="1px" width="90" x="-2" y="-3"/>
<rect fill="rgb(224,229,239)" height="15" rx="0" ry="0" stroke="rgb(2,59,185)" stroke-width="2px" style="cursor: move;" width="86" x="0" y="0"/>
<text fill="#444444" font-family="verdana" font-size="8.0625" font-style="normal" font-weight="normal" style="cursor: move;" visibility="visible" x="3" y="3">
<tspan dy="1em" x="3">Differentes Formes</tspan>
</text>
<ellipse cx="3" cy="3" fill="rgb(224,229,239)" height="6" rx="3" ry="3" stroke="rgb(2,59,185)" stroke-width="1px" style="cursor: default;" visibility="hidden" width="6"/>
<g focusable="true" height="9" preserveAspectRatio="none" transform="translate(0,3) scale(0,0.09)" width="0"/>
</g>
<g focusable="true" height="100" preserveAspectRatio="none" transform="translate(-267,-59) scale(1,1)" visibility="visible" width="100">
<rect fill="rgb(252,235,192)" fill-opacity="0" height="24" rx="3.5999999999999996" ry="3.5999999999999996" stroke="rgb(241,163,39)" stroke-opacity="0" stroke-width="1px" width="138" x="-2" y="-3"/>
<line stroke="#495879" stroke-opacity="1" stroke-width="1px" style="cursor: move;" x1="0" x2="134" y1="18" y2="18"/>
<text fill="#444444" font-family="verdana" font-size="10.75" font-style="normal" font-weight="normal" style="cursor: move;" visibility="visible" x="18" y="3">
<tspan dy="1em" x="18">Edition avec le clavier</tspan>
</text>
<g focusable="true" height="12" preserveAspectRatio="none" transform="translate(3,3) scale(0.12,0.12)" width="12">
<image height="90" preserveAspectRatio="none" style="cursor: pointer;" width="90" x="5" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0&#10;U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHMSURBVDjLxVNNSxtRFD0jEYqgBCMU00bE&#10;WFsqSNoi1EU2WiiluHEluuumfyH0B3RbuvQHCIpbaaFSxZULQYMUAklJCQZDjUTyMfl48z5675t0&#10;AgqCuPDC5dw3M+/c8+6Z5xhjcJfowx0j9L/IZrMfPc/7QtmhaLbb7Xqr1SpTppvN5jlhlTBHuZNK&#10;peQ1AvrgK20EZSqZTK7dWkGj0einrt+JaPM2R3D28/KU8LGb2wMRIPz8LZTSkDYVPKkgPQVB6Hm8&#10;lhaFXxeZwDwM1QNGdoWN0Zza2LUi5JqfKa1tTfzYz1R6LkxGB1E8d/Hk0RAKf+t4FhtC/qyG6fEw&#10;csUqEpPDyBQuMft0xD5jhUJIOHu/BSlooFh2LTO/4I6SuwRHMQEm4hG8nIpg97iEnydl9EnpS5p/&#10;MYo3r6J0Vo33r2PoCIWl5DjaQmNlIU5rjQ/vpuxmDibkeTjffrkm+qCFP6UapOTOva6swAuQlKme&#10;spmJCHbSJYTslKnr4twYNnbzWJ6fuNG2z+tpfFpNYPvg1DZytg4rJjYgoLpT11rbCQdoug5YF8gV&#10;dkr7+OPoDKGOkBcZ14xc8devu/+AVamUP2BKTdm9ghfOvd/Gf3hhfpp0UP3EAAAAAElFTkSuQmCC&#10;" y="5"> </image>
</g>
<ellipse cx="-3" cy="18" fill="#add1f7" height="6" rx="3" ry="3" stroke="rgb(2,59,185)" stroke-width="1px" style="cursor: default;" visibility="visible" width="6"/>
</g>
<g focusable="true" height="100" preserveAspectRatio="none" transform="translate(-489,-107) scale(1,1)" visibility="visible" width="100">
<rect fill="rgb(252,235,192)" fill-opacity="0" height="21" rx="3.15" ry="3.15" stroke="rgb(241,163,39)" stroke-opacity="0" stroke-width="1px" width="196" x="-2" y="-3"/>
<line stroke="#495879" stroke-opacity="1" stroke-width="1px" style="cursor: move;" x1="0" x2="192" y1="15" y2="15"/>
<text fill="#444444" font-family="verdana" font-size="8.0625" font-style="normal" font-weight="normal" style="cursor: move;" visibility="visible" x="3" y="3">
<tspan dy="1em" x="3">Se déplacer entre les noeuds avec les flèches</tspan>
</text>
<ellipse cx="3" cy="3" fill="rgb(224,229,239)" height="6" rx="3" ry="3" stroke="rgb(2,59,185)" stroke-width="1px" style="cursor: default;" visibility="hidden" width="6"/>
<g focusable="true" height="9" preserveAspectRatio="none" transform="translate(0,3) scale(0,0.09)" width="0"/>
</g>
<g focusable="true" height="100" preserveAspectRatio="none" transform="translate(-471,-82) scale(1,1)" visibility="visible" width="100">
<rect fill="rgb(252,235,192)" fill-opacity="0" height="21" rx="3.15" ry="3.15" stroke="rgb(241,163,39)" stroke-opacity="0" stroke-width="1px" width="178" x="-2" y="-3"/>
<line stroke="#495879" stroke-opacity="1" stroke-width="1px" style="cursor: move;" x1="0" x2="174" y1="15" y2="15"/>
<text fill="#444444" font-family="verdana" font-size="8.0625" font-style="normal" font-weight="normal" style="cursor: move;" visibility="visible" x="3" y="3">
<tspan dy="1em" x="3">Pour éditer, commencer à taper du texte</tspan>
</text>
<ellipse cx="3" cy="3" fill="rgb(224,229,239)" height="6" rx="3" ry="3" stroke="rgb(2,59,185)" stroke-width="1px" style="cursor: default;" visibility="hidden" width="6"/>
<g focusable="true" height="9" preserveAspectRatio="none" transform="translate(0,3) scale(0,0.09)" width="0"/>
</g>
<g focusable="true" height="100" preserveAspectRatio="none" transform="translate(-545,-57) scale(1,1)" visibility="visible" width="100">
<rect fill="rgb(252,235,192)" fill-opacity="0" height="21" rx="3.15" ry="3.15" stroke="rgb(241,163,39)" stroke-opacity="0" stroke-width="1px" width="252" x="-2" y="-3"/>
<line stroke="#495879" stroke-opacity="1" stroke-width="1px" style="cursor: move;" x1="0" x2="248" y1="15" y2="15"/>
<text fill="#444444" font-family="verdana" font-size="8.0625" font-style="normal" font-weight="normal" style="cursor: move;" visibility="visible" x="3" y="3">
<tspan dy="1em" x="3">Appuyer sur Ctrl/Meta+Enter pour ajouter un noeud enfant</tspan>
</text>
<ellipse cx="3" cy="3" fill="rgb(224,229,239)" height="6" rx="3" ry="3" stroke="rgb(2,59,185)" stroke-width="1px" style="cursor: default;" visibility="hidden" width="6"/>
<g focusable="true" height="9" preserveAspectRatio="none" transform="translate(0,3) scale(0,0.09)" width="0"/>
</g>
<g focusable="true" height="100" preserveAspectRatio="none" transform="translate(-543,-32) scale(1,1)" visibility="visible" width="100">
<rect fill="rgb(252,235,192)" fill-opacity="0" height="21" rx="3.15" ry="3.15" stroke="rgb(241,163,39)" stroke-opacity="0" stroke-width="1px" width="250" x="-2" y="-3"/>
<line stroke="#495879" stroke-opacity="1" stroke-width="1px" style="cursor: move;" x1="0" x2="246" y1="15" y2="15"/>
<text fill="#444444" font-family="verdana" font-size="8.0625" font-style="normal" font-weight="normal" style="cursor: move;" visibility="visible" x="3" y="3">
<tspan dy="1em" x="3">Appuyer sur Enter pour ajouter un noeud de même niveau</tspan>
</text>
<ellipse cx="3" cy="3" fill="rgb(224,229,239)" height="6" rx="3" ry="3" stroke="rgb(2,59,185)" stroke-width="1px" style="cursor: default;" visibility="hidden" width="6"/>
<g focusable="true" height="9" preserveAspectRatio="none" transform="translate(0,3) scale(0,0.09)" width="0"/>
</g>
<g focusable="true" height="100" preserveAspectRatio="none" transform="translate(-449,-7) scale(1,1)" visibility="visible" width="100">
<rect fill="rgb(252,235,192)" fill-opacity="0" height="21" rx="3.15" ry="3.15" stroke="rgb(241,163,39)" stroke-opacity="0" stroke-width="1px" width="156" x="-2" y="-3"/>
<line stroke="#495879" stroke-opacity="1" stroke-width="1px" style="cursor: move;" x1="0" x2="152" y1="15" y2="15"/>
<text fill="rgb(82,92,97)" font-family="verdana" font-size="8.0625" font-style="normal" font-weight="normal" style="cursor: move;" visibility="visible" x="3" y="3">
<tspan dy="1em" x="3">Plus de ?. Cliquer sur les raccourcis</tspan>
</text>
<ellipse cx="3" cy="3" fill="rgb(224,229,239)" height="6" rx="3" ry="3" stroke="rgb(2,59,185)" stroke-width="1px" style="cursor: default;" visibility="hidden" width="6"/>
<g focusable="true" height="9" preserveAspectRatio="none" transform="translate(0,3) scale(0,0.09)" width="0"/>
</g>
<g focusable="true" height="100" preserveAspectRatio="none" transform="translate(133,79) scale(1,1)" visibility="visible" width="100">
<rect fill="rgb(252,235,192)" fill-opacity="0" height="24" rx="3.5999999999999996" ry="3.5999999999999996" stroke="rgb(241,163,39)" stroke-opacity="0" stroke-width="1px" width="49" x="-2" y="-3"/>
<line stroke="#495879" stroke-opacity="1" stroke-width="1px" style="cursor: move;" x1="0" x2="45" y1="18" y2="18"/>
<text fill="#444444" font-family="verdana" font-size="10.75" font-style="normal" font-weight="normal" style="cursor: move;" visibility="visible" x="3" y="3">
<tspan dy="1em" x="3">Partage</tspan>
</text>
<ellipse cx="48" cy="18" fill="#edabff" height="6" rx="3" ry="3" stroke="rgb(2,59,185)" stroke-width="1px" style="cursor: default;" visibility="visible" width="6"/>
<g focusable="true" height="12" preserveAspectRatio="none" transform="translate(0,3) scale(0,0.12)" width="0"/>
</g>
<g focusable="true" height="100" preserveAspectRatio="none" transform="translate(208,55) scale(1,1)" visibility="visible" width="100">
<rect fill="rgb(252,235,192)" fill-opacity="0" height="21" rx="3.15" ry="3.15" stroke="rgb(241,163,39)" stroke-opacity="0" stroke-width="1px" width="79" x="-2" y="-3"/>
<line stroke="#495879" stroke-opacity="1" stroke-width="1px" style="cursor: move;" x1="0" x2="75" y1="15" y2="15"/>
<text fill="#444444" font-family="verdana" font-size="8.0625" font-style="normal" font-weight="normal" style="cursor: move;" visibility="visible" x="3" y="3">
<tspan dy="1em" x="3">Inviter des amis</tspan>
</text>
<ellipse cx="3" cy="3" fill="rgb(224,229,239)" height="6" rx="3" ry="3" stroke="rgb(2,59,185)" stroke-width="1px" style="cursor: default;" visibility="hidden" width="6"/>
<g focusable="true" height="9" preserveAspectRatio="none" transform="translate(0,3) scale(0,0.09)" width="0"/>
</g>
<g focusable="true" height="100" preserveAspectRatio="none" transform="translate(209,80) scale(1,1)" visibility="visible" width="100">
<rect fill="rgb(252,235,192)" fill-opacity="0" height="21" rx="3.15" ry="3.15" stroke="rgb(241,163,39)" stroke-opacity="0" stroke-width="1px" width="112" x="-2" y="-3"/>
<line stroke="#495879" stroke-opacity="1" stroke-width="1px" style="cursor: move;" x1="0" x2="108" y1="15" y2="15"/>
<text fill="#444444" font-family="verdana" font-size="8.0625" font-style="normal" font-weight="normal" style="cursor: move;" visibility="visible" x="3" y="3">
<tspan dy="1em" x="3">Encapsuler dans un blog</tspan>
</text>
<ellipse cx="3" cy="3" fill="rgb(224,229,239)" height="6" rx="3" ry="3" stroke="rgb(2,59,185)" stroke-width="1px" style="cursor: default;" visibility="hidden" width="6"/>
<g focusable="true" height="9" preserveAspectRatio="none" transform="translate(0,3) scale(0,0.09)" width="0"/>
</g>
<g focusable="true" height="100" preserveAspectRatio="none" transform="translate(209,105) scale(1,1)" visibility="visible" width="100">
<rect fill="rgb(252,235,192)" fill-opacity="0" height="21" rx="3.15" ry="3.15" stroke="rgb(241,163,39)" stroke-opacity="0" stroke-width="1px" width="88" x="-2" y="-3"/>
<line stroke="#495879" stroke-opacity="1" stroke-width="1px" style="cursor: move;" x1="0" x2="84" y1="15" y2="15"/>
<text fill="#444444" font-family="verdana" font-size="8.0625" font-style="normal" font-weight="normal" style="cursor: move;" visibility="visible" x="3" y="3">
<tspan dy="1em" x="3">Publier votre carte</tspan>
</text>
<ellipse cx="3" cy="3" fill="rgb(224,229,239)" height="6" rx="3" ry="3" stroke="rgb(2,59,185)" stroke-width="1px" style="cursor: default;" visibility="hidden" width="6"/>
<g focusable="true" height="9" preserveAspectRatio="none" transform="translate(0,3) scale(0,0.09)" width="0"/>
</g>
<g focusable="true" height="100" preserveAspectRatio="none" transform="translate(-264,54) scale(1,1)" visibility="visible" width="100">
<rect fill="rgb(252,235,192)" fill-opacity="0" height="24" rx="3.5999999999999996" ry="3.5999999999999996" stroke="rgb(241,163,39)" stroke-opacity="0" stroke-width="1px" width="135" x="-2" y="-3"/>
<line stroke="#495879" stroke-opacity="1" stroke-width="1px" style="cursor: move;" x1="0" x2="131" y1="18" y2="18"/>
<text fill="#444444" font-family="verdana" font-size="10.75" font-style="normal" font-weight="normal" style="cursor: move;" visibility="visible" x="18" y="3">
<tspan dy="1em" x="18">Edition avec la souris</tspan>
</text>
<g focusable="true" height="12" preserveAspectRatio="none" transform="translate(3,3) scale(0.12,0.12)" width="12">
<image height="90" preserveAspectRatio="none" style="cursor: pointer;" width="90" x="5" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0&#10;U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAIMSURBVDjLpZLLaxpRFMZHCEIp/V/SfaGL&#10;/gXdZxMIpd0kgo6jINoH6iIIBd1kFRdmoZUOs4pVXDhKfJCA+AQfAz4QCQSf41tP77lwB2mTLtIL&#10;Z2Zzft/3nXMvBwDcc0uW5XfPAtPptD4ej9skSeo/2lCpVF6VSiVXPp+/zWazEnF6s+f6+pqccDis&#10;+v3+v+FyufyCwLedTgcmkwn0+33I5XIQiUR+xWKx78RVqdVqkEqlwOPxXP3prC8WizetVgvw7HY7&#10;YKdarUIoFFJJAvB6vQ9ut/vUZrO9ZKCONHwoFAodRVFgvV7DdrulAljD4RBUVYVerwc+nw9cLteR&#10;2WzWI4uRdaR+ttttGhkBjI3Nq9UKME29XofpdEpFo9EoOJ1OnqXmyKI+s8gsNiZoNptAkkG324X5&#10;fE4LBXF+h8NxrQlkMpkURmRx0WWz2cBsNqNz4zIxPqZDYWIIVqs1rgkkEon75XKpgeiyWCyoIwoj&#10;gH+EyZWCxWLZGI3Gt5pAUhTv0Q0bGMgcR6MRFWw0GiCKIgiCUCbw4f7NcbmLCxl3gO77ILqymcl1&#10;3RH47LFHx9UF86V6fg6rZJIC4/GYFo6FQoFAAMiVvX/qWXOtk5ODxtnpzezbV7o0dB4MBkDeBASD&#10;QeB5/ovBYNA9KYAf5fj4oPjp46UkCPIVb3qw2+09sukfJpPp6F+wJvA/9RsZICZTCkof6AAAAABJ&#10;RU5ErkJggg==" y="5"> </image>
</g>
<ellipse cx="-3" cy="18" fill="#d9b518" height="6" rx="3" ry="3" stroke="rgb(2,59,185)" stroke-width="1px" style="cursor: default;" visibility="visible" width="6"/>
</g>
<g focusable="true" height="100" preserveAspectRatio="none" transform="translate(-468,17) scale(1,1)" visibility="visible" width="100">
<rect fill="rgb(252,235,192)" fill-opacity="0" height="21" rx="3.15" ry="3.15" stroke="rgb(241,163,39)" stroke-opacity="0" stroke-width="1px" width="178" x="-2" y="-3"/>
<line stroke="#495879" stroke-opacity="1" stroke-width="1px" style="cursor: move;" x1="0" x2="174" y1="15" y2="15"/>
<text fill="#444444" font-family="verdana" font-size="8.0625" font-style="normal" font-weight="normal" style="cursor: move;" visibility="visible" x="3" y="3">
<tspan dy="1em" x="3">Double-Clic sur un noeud : édite le texte</tspan>
</text>
<ellipse cx="3" cy="3" fill="rgb(224,229,239)" height="6" rx="3" ry="3" stroke="rgb(2,59,185)" stroke-width="1px" style="cursor: default;" visibility="hidden" width="6"/>
<g focusable="true" height="9" preserveAspectRatio="none" transform="translate(0,3) scale(0,0.09)" width="0"/>
</g>
<g focusable="true" height="100" preserveAspectRatio="none" transform="translate(-465,42) scale(1,1)" visibility="visible" width="100">
<rect fill="rgb(252,235,192)" fill-opacity="0" height="21" rx="3.15" ry="3.15" stroke="rgb(241,163,39)" stroke-opacity="0" stroke-width="1px" width="175" x="-2" y="-3"/>
<line stroke="#495879" stroke-opacity="1" stroke-width="1px" style="cursor: move;" x1="0" x2="171" y1="15" y2="15"/>
<text fill="#444444" font-family="verdana" font-size="8.0625" font-style="normal" font-weight="normal" style="cursor: move;" visibility="visible" x="3" y="3">
<tspan dy="1em" x="3">Double-Clic sur le fond : créer un noeud </tspan>
</text>
<ellipse cx="3" cy="3" fill="rgb(224,229,239)" height="6" rx="3" ry="3" stroke="rgb(2,59,185)" stroke-width="1px" style="cursor: default;" visibility="hidden" width="6"/>
<g focusable="true" height="9" preserveAspectRatio="none" transform="translate(0,3) scale(0,0.09)" width="0"/>
</g>
<g focusable="true" height="100" preserveAspectRatio="none" transform="translate(-431,67) scale(1,1)" visibility="visible" width="100">
<rect fill="rgb(252,235,192)" fill-opacity="0" height="21" rx="3.15" ry="3.15" stroke="rgb(241,163,39)" stroke-opacity="0" stroke-width="1px" width="141" x="-2" y="-3"/>
<line stroke="#495879" stroke-opacity="1" stroke-width="1px" style="cursor: move;" x1="0" x2="137" y1="15" y2="15"/>
<text fill="#444444" font-family="verdana" font-size="8.0625" font-style="normal" font-weight="normal" style="cursor: move;" visibility="visible" x="3" y="3">
<tspan dy="1em" x="3">Déplacer la position des noeuds</tspan>
</text>
<ellipse cx="3" cy="3" fill="rgb(224,229,239)" height="6" rx="3" ry="3" stroke="rgb(2,59,185)" stroke-width="1px" style="cursor: default;" visibility="hidden" width="6"/>
<g focusable="true" height="9" preserveAspectRatio="none" transform="translate(0,3) scale(0,0.09)" width="0"/>
</g>
<g focusable="true" height="100" preserveAspectRatio="none" transform="translate(-397,92) scale(1,1)" visibility="visible" width="100">
<rect fill="rgb(252,235,192)" fill-opacity="0" height="21" rx="3.15" ry="3.15" stroke="rgb(241,163,39)" stroke-opacity="0" stroke-width="1px" width="107" x="-2" y="-3"/>
<line stroke="#495879" stroke-opacity="1" stroke-width="1px" style="cursor: move;" x1="0" x2="103" y1="15" y2="15"/>
<text fill="rgb(82,92,97)" font-family="verdana" font-size="8.0625" font-style="normal" font-weight="normal" style="cursor: move;" visibility="visible" x="3" y="3">
<tspan dy="1em" x="3">Utiliser la barre d'outils</tspan>
</text>
<ellipse cx="3" cy="3" fill="rgb(224,229,239)" height="6" rx="3" ry="3" stroke="rgb(2,59,185)" stroke-width="1px" style="cursor: default;" visibility="hidden" width="6"/>
<g focusable="true" height="9" preserveAspectRatio="none" transform="translate(0,3) scale(0,0.09)" width="0"/>
</g>
<ellipse cx="8" cy="8" fill="gray" height="6" rx="3" ry="3" stroke="#6589de" stroke-width="1px" style="cursor: pointer;" visibility="hidden" width="6"/>
<ellipse cx="8" cy="8" fill="gray" height="6" rx="3" ry="3" stroke="#6589de" stroke-width="1px" style="cursor: pointer;" visibility="hidden" width="6"/>
<line fill-opacity="0.3" stroke="#6589de" stroke-opacity="0.3" stroke-width="1px"/>
<line fill-opacity="0.3" stroke="#6589de" stroke-opacity="0.3" stroke-width="1px"/>
<path d="M-200,-36 C-199.66666666666666,-7.666666666665861 -199.33333333333334,20.66666666666586 -199,49" fill="#495879" fill-opacity="1" stroke="#9b74e6" stroke-dasharray="4,2" stroke-opacity="1" stroke-width="2px" style="fill: none; cursor: pointer;" visibility="visible"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
wise-webapp/src/test/resources/data/svg/export.pdf Normal file
View File

Binary file not shown.

0
wise-webapp/src/test/resources/data/svg/export.png Normal file
View File

2
wise-webapp/src/test/resources/data/svg/export.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB