vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-09-21 03:30:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add support for image export.

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2021-12-31 01:18:21 -08:00
parent 478ba7a417
commit 85f560324b
10 changed files with 106 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
packages/mindplot/src/components/Designer.js
View File

@ -36,6 +36,7 @@ import DragManager from './DragManager';
import RelationshipPivot from './RelationshipPivot';
import Relationship from './Relationship';
import SVGExporter from './export/SVGExporter';
import PNGExporter from './export/PNGExporter';
import TopicEventDispatcher, { TopicEvent } from './TopicEventDispatcher';
import TopicFeatureFactory from './TopicFeature';
@ -355,15 +356,27 @@ class Designer extends Events {
}
export(formatType) {
const svgElement = this._workspace.getSVGElement();
const workspace = this._workspace;
const svgElement = workspace.getSVGElement();
const size = workspace.getSize();
const mindmap = this._mindmap;
let result = '';
if (formatType === 'svg') {
const exporter = new SVGExporter(mindmap, svgElement);
result = exporter.export();
let exporter;
switch (formatType) {
case 'svg': {
exporter = new SVGExporter(mindmap, svgElement);
break;
}
case 'png': {
exporter = new PNGExporter(mindmap, svgElement, size.width, size.height);
break;
}
default:
throw new Error('Unsupported encoding');
}
return result;
return exporter.export();
}
/**

2
packages/mindplot/src/components/export/Exporter.ts
View File

@ -1,6 +1,6 @@
interface Exporter {
export(): string;
export(): Promise<string>;
}
export default Exporter;

14
packages/mindplot/src/components/export/FreemindExporter.ts
View File

@ -1,14 +0,0 @@
import Exporter from "./Exporter";
import Mindmap from "../model/Mindmap";
class FreemindExporter implements Exporter {
mindplot: Mindmap;
constructor(mindplot: Mindmap) {
this.mindplot = mindplot;
}
export(): string {
return "TBI";
}
}
export default FreemindExporter;

43
packages/mindplot/src/components/export/PNGExporter.ts Normal file
View File

@ -0,0 +1,43 @@
import { Mindmap } from "../..";
import Exporter from "./Exporter";
import SVGExporter from "./SVGExporter";
class PNGExporter implements Exporter {
svgElement: Element;
mindmap: Mindmap;
width: number;
height: number;
constructor(mindmap: Mindmap, svgElement: Element, width: number, height: number) {
this.svgElement = svgElement;
this.mindmap = mindmap;
this.width = width;
this.height = height;
}
async export(): Promise<string> {
const svgExporter = new SVGExporter(this.mindmap, this.svgElement);
const svgUrl = await svgExporter.export();
// Create canvas ...
const canvas = document.createElement('canvas');
canvas.setAttribute('width', this.width.toString());
canvas.setAttribute('height', this.height.toString());
// Render the image and wait for the response ...
const img = new Image();
const result = new Promise<string>((resolve, reject) => {
img.onload = () => {
canvas.getContext('2d').drawImage(img, 0, 0);
const imgDataUri = canvas.toDataURL('image/png').replace('image/png', 'octet/stream');
URL.revokeObjectURL(imgDataUri);
resolve(imgDataUri);
}
});
img.src = svgUrl;
return result;
}
}
export default PNGExporter;

15
packages/mindplot/src/components/export/PlainTextExporter.ts
View File

@ -1,15 +0,0 @@
import Exporter from "./Exporter";
import Mindmap from "../model/Mindmap";
class PlainTextExporter implements Exporter {
mindplot: Mindmap;
constructor(mindplot: Mindmap) {
this.mindplot = mindplot;
}
export(): string {
return "TBI";
}
}
export default PlainTextExporter;

13
packages/mindplot/src/components/export/SVGExporter.ts
View File

@ -8,16 +8,19 @@ class SVGExporter implements Exporter {
this.svgElement = svgElement;
}
export(): string {
export(): Promise<string> {
// Replace all images for in-line images ...
const imagesElements: HTMLCollection = this.svgElement.getElementsByTagName('image');
let result:string = new XMLSerializer().serializeToString(this.svgElement);
let svgTxt:string = new XMLSerializer().serializeToString(this.svgElement);
// Are namespace declared ?. Otherwise, force the declaration ...
if(result.indexOf('xmlns:xlink=')!=-1){
result.replace('<svg ', '<svg xmlns:xlink="http://www.w3.org/1999/xlink" ')
if(svgTxt.indexOf('xmlns:xlink=')!==-1){
svgTxt.replace('<svg ', '<svg xmlns:xlink="http://www.w3.org/1999/xlink" ')
}
return result;
const blob = new Blob([svgTxt], { type: 'image/svg+xml' });
const result = URL.createObjectURL(blob);
return Promise.resolve(result);
}
}

32
packages/mindplot/src/components/widget/Menu.js
View File

@ -212,27 +212,25 @@ class Menu extends IMenu {
}
this._addButton('export', false, false, () => {
const svgContent = designer.export('svg');
const formatType = 'png';
designer.export(formatType).then((url) => {
// Create hidden anchor to force download ...
const anchor = document.createElement('a');
anchor.style = 'display: none';
anchor.download = `${mapId}.${formatType}`;
anchor.href = url;
document.body.appendChild(anchor);
// Encode content ...
const blob = new Blob([svgContent], { type: 'image/svg+xml' });
const win = window.URL || window.webkitURL || window;
const svgUri = win.createObjectURL(blob);
console.log(svgContent);
// Trigger click ...
anchor.click();
// Clean up ...
document.body.removeChild(anchor);
});
// Create anchor element ...
const anchor = document.createElement('a');
anchor.style = 'display: none';
anchor.download = `${mapId}.svg`;
anchor.href = svgUri;
document.body.appendChild(anchor);
// Trigger click ...
anchor.click();
// Clean up ...
document.body.removeChild(anchor);
});
Menu._registerTooltip('export', $msg('EXPORT'));
this._addButton('print', false, false, () => {

2
packages/mindplot/src/index.js
View File

@ -22,7 +22,6 @@ import Mindmap from './components/model/Mindmap';
import PersistenceManager from './components/PersistenceManager';
import Designer from './components/Designer';
import LocalStorageManager from './components/LocalStorageManager';
import TxtExporter from './components/export/PlainTextExporter';
import Menu from './components/widget/Menu';
@ -37,5 +36,4 @@ export {
LocalStorageManager,
Menu,
DesignerBuilder,
TxtExporter,
};

20
packages/mindplot/test/unit/export/PlainTextExporterTestSuite.test.ts
View File

@ -1,20 +0,0 @@
import PlainTextExporter from '../../../src/components/export/PlainTextExporter';
import Mindmap from '../../../src/components/model/Mindmap';
import fs from 'fs';
import path from 'path';
import XMLSerializerFactory from '../../../src/components/persistence/XMLSerializerFactory';
test('mindplot generation of simple maps', () => {
const parser = new DOMParser();
// Load DOM ...
const mapStream =fs.readFileSync(path.resolve(__dirname, './samples/welcome.xml'),{encoding: 'utf-8'});
const document = parser.parseFromString(mapStream.toString(), 'text/xml')
// Convert to mindmap ...
const serializer = XMLSerializerFactory.getSerializerFromDocument(document);
const mindmap:Mindmap = serializer.loadFromDom(document,'welcome');
const exporter = new PlainTextExporter(mindmap);
console.log(exporter.export());
});

36
packages/mindplot/test/unit/export/SVGExporterTestSuite.test.ts
View File

@ -3,8 +3,9 @@ import fs from 'fs';
import path from 'path';
import XMLSerializerFactory from '../../../src/components/persistence/XMLSerializerFactory';
import SVGExporter from '../../../src/components/export/SVGExporter';
import PNGExporter from '../../../src/components/export/PNGExporter';
test('mindplot generation of simple maps', () => {
test('mindplot generation of simple maps', async () => {
// Load mindmap DOM ...
const mindmapPath = path.resolve(__dirname, './samples/welcome.xml');
const mapDocument = parseXMLFile(mindmapPath, 'text/xml');
@ -18,21 +19,24 @@ test('mindplot generation of simple maps', () => {
const svgDocument = parseXMLFile(svgPath, 'image/svg+xml');
// Inspect ...
const exporter = new SVGExporter(mindmap, svgDocument.documentElement);
console.log('Exported map:' + exporter.export());
// const svgExporter = new SVGExporter(mindmap, svgDocument.documentElement);
// console.log('Exported map:' + await svgExporter.export());
// const pngExporter = new PNGExporter(mindmap, svgDocument.documentElement, 400, 400);
// console.log('Exported map:' + await pngExporter.export());
function parseXMLFile(filePath: fs.PathOrFileDescriptor, mimeType: DOMParserSupportedType) {
const parser = new DOMParser();
const stream = fs.readFileSync(filePath, { encoding: 'utf-8' });
const xmlDoc = parser.parseFromString(stream.toString(), mimeType);
// Is there any parsing error ?.
if (xmlDoc.getElementsByTagName("parsererror").length > 0) {
console.log(new XMLSerializer().serializeToString(xmlDoc));
throw new Error(`Unexpected error parsing: ${filePath}. Error: ${new XMLSerializer().serializeToString(xmlDoc)}`);
}
return xmlDoc;
}
});
function parseXMLFile(filePath: fs.PathOrFileDescriptor, mimeType: DOMParserSupportedType) {
const parser = new DOMParser();
const stream = fs.readFileSync(filePath, { encoding: 'utf-8' });
const xmlDoc = parser.parseFromString(stream.toString(), mimeType);
// Is there any parsing error ?.
if (xmlDoc.getElementsByTagName("parsererror").length > 0) {
console.log(new XMLSerializer().serializeToString(xmlDoc));
throw new Error(`Unexpected error parsing: ${filePath}. Error: ${new XMLSerializer().serializeToString(xmlDoc)}`);
}
return xmlDoc;
}