vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-12-26 13:23:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'feature/browser_export' into develop

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2021-12-30 12:54:11 -08:00
commit 5e6228d9f4
47 changed files with 2987 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/core-js/src/index.js
View File

@ -16,20 +16,7 @@
* limitations under the License.
*/
export const innerXML = function (node) {
// summary:
// Implementation of MS's innerXML function.
if ($defined(node.innerXML)) {
return node.innerXML;
// string
} else if ($defined(node.xml)) {
return node.xml;
// string
} else if ($defined(XMLSerializer)) {
return new XMLSerializer().serializeToString(node);
// string
}
};
/**
* Cross-browser implementation of creating an XML document object.

6
packages/mindplot/package.json
View File

@ -26,7 +26,7 @@
"lint": "eslint src",
"playground": "webpack serve --config webpack.playground.js",
"cy:run": "cypress run",
"test:unit": "jest ./test/unit/*.ts ./test/unit/*.js",
"test:unit": "jest ./test/unit/export/*.ts ./test/unit/layout/*.js",
"test:integration": "start-server-and-test playground http-get://localhost:8081 cy:run",
"test": "yarn test:unit && yarn test:integration"
},
@ -34,7 +34,7 @@
"dependencies": {
"@wisemapping/core-js": "^0.4.0",
"@wisemapping/web2d": "^0.4.0",
"jest": "^27.4.3",
"jest": "^27.4.5",
"jquery": "3.6.0",
"lodash": "^4.17.21"
},
@ -70,6 +70,6 @@
"webpack-bundle-analyzer": "^4.5.0",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2",
"webpack-merge": "^5.8.0"
"webpack-merge": "^5.8.0"
}
}

6
packages/mindplot/src/components/ImageIcon.js
View File

@ -38,7 +38,7 @@ class ImageIcon extends Icon {
// Build graph image representation ...
const iconType = iconModel.getIconType();
const imgUrl = ImageIcon._getImageUrl(iconType);
const imgUrl = ImageIcon.getImageUrl(iconType);
super(imgUrl);
this._topicId = topic.getId();
@ -53,13 +53,13 @@ class ImageIcon extends Icon {
const newIconType = ImageIcon._getNextFamilyIconId(iconTypeClick);
iconModel.setIconType(newIconType);
me._image.setHref(ImageIcon._getImageUrl(newIconType));
me._image.setHref(ImageIcon.getImageUrl(newIconType));
});
this._image.setCursor('pointer');
}
}
static _getImageUrl(iconId) {
static getImageUrl(iconId) {
let result = images[`${iconId}.svg`];
if (!result) {
result = images[`${iconId}.png`];

4
packages/mindplot/src/components/Workspace.js
View File

@ -16,7 +16,7 @@
* limitations under the License.
*/
import { $assert, $defined } from '@wisemapping/core-js';
import { Workspace as Workspace2D, Toolkit } from '@wisemapping/web2d';
import { Workspace as Workspace2D } from '@wisemapping/web2d';
class Workspace {
constructor(screenManager, zoom, isReadOnly) {
@ -64,7 +64,7 @@ class Workspace {
fillColor: 'transparent',
strokeWidth: 0,
};
Toolkit.init();
return new Workspace2D(workspaceProfile);
}

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

@ -1,7 +1,6 @@
import Mindmap from '../model/Mindmap';
interface Exporter {
export(mindplot: Mindmap): string;
export(): string;
}
export default Exporter;

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

@ -0,0 +1,14 @@
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;

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

@ -0,0 +1,15 @@
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;

26
packages/mindplot/src/components/export/SVGExporter.ts Normal file
View File

@ -0,0 +1,26 @@
import { Mindmap } from "../..";
import ImageIcon from "../ImageIcon";
import Exporter from "./Exporter";
class SVGExporter implements Exporter {
svgElement: Element;
constructor(mindmap: Mindmap, svgElement: Element) {
this.svgElement = svgElement;
}
export(): string {
// Replace all images for in-line images ...
const imagesElements: HTMLCollection = this.svgElement.getElementsByTagName('image');
console.log(imagesElements.length);
const image = ImageIcon.getImageUrl('face_smile');
Array.from(imagesElements).forEach((image) => {
const imgValue = image.attributes['xlink:href'].value;
console.log(image.attributes);
});
return "";
}
}
export default SVGExporter;

2139
packages/mindplot/src/components/export/xslt/mm2markdown.xsl Normal file
View File

File diff suppressed because one or more lines are too long

38
packages/mindplot/src/components/export/xslt/mm2text.xsl Normal file
View File

@ -0,0 +1,38 @@
<?xml version="1.0" encoding="UTF-8" ?>
<!--
Document : mm2text.xsl
Created on : 01 February 2004, 17:17
Author : joerg feuerhake joerg.feuerhake@free-penguin.org
Description: transforms freemind mm format to html, handles crossrefs and adds numbering. feel free to customize it while leaving the ancient authors
mentioned. thank you
ChangeLog:
See: http://freemind.sourceforge.net/
-->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="text" indent="no" encoding="ISO-8859-1" />
<xsl:key name="refid" match="node" use="@ID" />
<xsl:template match="/">
<xsl:text>#MindMapExport FreemindVersion:</xsl:text><xsl:value-of select="map/@version"/>
<xsl:text>&#xA;</xsl:text>
<xsl:text>&#xA;</xsl:text><xsl:apply-templates/>
</xsl:template>
<xsl:template match="node">
<xsl:variable name="thisid" select="@ID"/>
<xsl:variable name="target" select="arrowlink/@DESTINATION"/>
<xsl:number level="multiple" count="node" format="1"/><xsl:text> </xsl:text><xsl:value-of select="@TEXT"/>
<xsl:if test="arrowlink/@DESTINATION != ''">
<xsl:text> (see:</xsl:text>
<xsl:for-each select="key('refid', $target)">
<xsl:value-of select="@TEXT"/>
</xsl:for-each>
<xsl:text>)</xsl:text>
</xsl:if>
<xsl:apply-templates/>
</xsl:template>
</xsl:stylesheet>

116
packages/mindplot/src/components/export/xslt/mm2xls_utf8.xsl Normal file
View File

@ -0,0 +1,116 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
(c) by Naoki Nose, Eric Lavarde 2006-2008
This code is licensed under the GPLv2 or later.
(http://www.gnu.org/copyleft/gpl.html)
Stylesheet to transform a FreeMind map into an Excel sheet, use menu point
File -> Export -> Using XSLT... to choose this XSL file, and name the
ExportFile Something.xls or Something.xml.
2006-12-10: added support for notes and attributes (EWL)
2008-10-23: corrected issue with ss namespace not being output (EWL)
-->
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns="urn:schemas-microsoft-com:office:spreadsheet"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:x="urn:schemas-microsoft-com:office:excel"
xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet"
xmlns:duss="urn:schemas-microsoft-com:office:dummyspreadsheet">
<xsl:output method="xml" indent="yes" encoding="UTF-8" standalone="yes"/>
<!-- the duss namespace alias is required in order to be able to output
ss:Data properly, Excel ignores the extraneous dummy namespace. -->
<xsl:namespace-alias stylesheet-prefix="duss" result-prefix="ss"/>
<xsl:template match="/map">
<xsl:processing-instruction name="mso-application"> progid="Excel.Sheet"</xsl:processing-instruction>
<Workbook>
<Styles>
<Style ss:ID="s16" ss:Name="attribute_cell">
<Borders>
<Border ss:Position="Bottom" ss:LineStyle="Continuous" ss:Weight="1"/>
<Border ss:Position="Left" ss:LineStyle="Continuous" ss:Weight="1"/>
<Border ss:Position="Right" ss:LineStyle="Continuous" ss:Weight="1"/>
<Border ss:Position="Top" ss:LineStyle="Continuous" ss:Weight="1"/>
</Borders>
</Style>
<Style ss:ID="s17" ss:Name="attribute_header">
<Borders>
<Border ss:Position="Bottom" ss:LineStyle="Continuous" ss:Weight="1"/>
<Border ss:Position="Left" ss:LineStyle="Continuous" ss:Weight="1"/>
<Border ss:Position="Right" ss:LineStyle="Continuous" ss:Weight="1"/>
<Border ss:Position="Top" ss:LineStyle="Continuous" ss:Weight="1"/>
</Borders>
<Font ss:Bold="1"/>
</Style>
</Styles>
<!-- we could probably put something more intelligent as worksheet name,
but it would require name mangling to avoid unallowed characters -->
<Worksheet ss:Name="FreeMind Sheet">
<Table>
<xsl:apply-templates select="node">
<xsl:with-param name="index" select="1" />
</xsl:apply-templates>
</Table>
</Worksheet>
</Workbook>
</xsl:template>
<xsl:template match="node">
<xsl:param name="index" />
<Row><Cell ss:Index="{$index}">
<xsl:call-template name="output-node-text-as-data" />
</Cell>
<xsl:if test="attribute">
<Cell ss:StyleID="s17">
<Data ss:Type="String">Names</Data></Cell>
<Cell ss:StyleID="s17">
<Data ss:Type="String">Values</Data></Cell>
</xsl:if>
</Row>
<xsl:apply-templates select="attribute">
<xsl:with-param name="index" select="$index + 1" />
</xsl:apply-templates>
<xsl:apply-templates select="node">
<xsl:with-param name="index" select="$index + 1" />
</xsl:apply-templates>
</xsl:template>
<xsl:template match="attribute">
<xsl:param name="index" />
<Row><Cell ss:Index="{$index}" ss:StyleID="s16">
<Data ss:Type="String"><xsl:value-of select="@NAME" /></Data>
</Cell>
<Cell ss:StyleID="s16">
<Data ss:Type="String"><xsl:value-of select="@VALUE" /></Data>
</Cell>
</Row>
</xsl:template>
<xsl:template name="output-node-text-as-data">
<xsl:choose>
<xsl:when test="richcontent[@TYPE='NODE']">
<!-- see comments about rich text and HTML format below -->
<duss:Data ss:Type="String" xmlns="http://www.w3.org/TR/REC-html40"><xsl:copy-of select="richcontent[@TYPE='NODE']/html/body/*" /></duss:Data>
</xsl:when>
<xsl:otherwise>
<Data ss:Type="String"><xsl:value-of select="@TEXT"/></Data>
<!-- xsl:value-of select="normalize-space(@TEXT)" / -->
</xsl:otherwise>
</xsl:choose>
<xsl:call-template name="output-note-text-as-comment" />
</xsl:template>
<!-- export of rich text in HTML format should work, but formatting is lost
because Excel understands only HTML tags in capitals, whereas
FreeMind exports in small caps. This can probably be solved but would
require some more tweaking -->
<xsl:template name="output-note-text-as-comment">
<xsl:if test="richcontent[@TYPE='NOTE']">
<Comment><duss:Data xmlns="http://www.w3.org/TR/REC-html40"><xsl:copy-of
select="richcontent[@TYPE='NOTE']/html/body/*" /></duss:Data></Comment>
</xsl:if>
</xsl:template>
</xsl:stylesheet>

16
packages/mindplot/src/components/persistence/XMLSerializerBeta.js
View File

@ -15,7 +15,7 @@
* limitations under the License.
*/
import {
$defined, $assert, createDocument, innerXML,
$defined, $assert, createDocument,
} from '@wisemapping/core-js';
import ModelCodeName from './ModelCodeName';
import Mindmap from '../model/Mindmap';
@ -169,6 +169,18 @@ class XMLSerializerBeta {
return noteDom;
}
static innerXML(element) {
let result = null;
if ($defined(element.innerXML)) {
result = element.innerXML;
} if ($defined(element.xml)) {
result = element.xml;
} if ($defined(XMLSerializer)) {
result = new XMLSerializer().serializeToString(element);
}
return result;
}
loadFromDom(dom, mapId) {
$assert(dom, 'Dom can not be null');
$assert(mapId, 'mapId can not be null');
@ -184,7 +196,7 @@ class XMLSerializerBeta {
$assert(
documentElement.tagName === XMLSerializerBeta.MAP_ROOT_NODE,
`This seem not to be a map document. Root Tag: '${documentElement.tagName}',HTML:${dom.innerHTML
}XML:${innerXML(dom)}`,
},XML:,${XMLSerializerBeta.innerXML(dom)}`,
);
// Start the loading process ...

14
packages/mindplot/src/components/persistence/XMLSerializerPela.js
View File

@ -233,7 +233,7 @@ class XMLSerializerPela {
// Is a wisemap?.
$assert(
rootElem.tagName === XMLSerializerPela.MAP_ROOT_NODE,
'This seem not to be a map document.',
`This seem not to be a map document. Found tag: ${rootElem.tagName}`,
);
this._idsMap = {};
@ -495,6 +495,18 @@ class XMLSerializerPela {
}
return result;
}
static innerXML(element) {
let result = null;
if ($defined(element.innerXML)) {
result = element.innerXML;
} if ($defined(element.xml)) {
result = element.xml;
} if ($defined(XMLSerializer)) {
result = new XMLSerializer().serializeToString(element);
}
return result;
}
}
/**

4
packages/mindplot/src/components/persistence/XMLSerializerTango.js
View File

@ -15,12 +15,12 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import XMLSerializer from './XMLSerializerPela';
import XMLSerializerPela from './XMLSerializerPela';
/**
* This serializer works exactly the same way as for the former version Pela
*/
class XMLSerializerTango extends XMLSerializer {
class XMLSerializerTango extends XMLSerializerPela {
}
// eslint-disable-next-line camelcase

2
packages/mindplot/src/components/widget/IconPanel.js
View File

@ -43,7 +43,7 @@ class IconPanel extends ToolbarPaneItem {
const iconId = familyIcons[j];
const img = $('<img>')
.attr('id', iconId)
.attr('src', ImageIcon._getImageUrl(iconId))
.attr('src', ImageIcon.getImageUrl(iconId))
.attr('class', 'panelIcon');
familyContent.append(img);

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

@ -22,7 +22,7 @@ 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/TxtExporter';
import TxtExporter from './components/export/PlainTextExporter';
import Menu from './components/widget/Menu';

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

@ -0,0 +1,20 @@
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());
});

35
packages/mindplot/test/unit/export/SVGExporterTestSuite.test.ts Normal file
View File

@ -0,0 +1,35 @@
import Mindmap from '../../../src/components/model/Mindmap';
import fs from 'fs';
import path from 'path';
import XMLSerializerFactory from '../../../src/components/persistence/XMLSerializerFactory';
import SVGExporter from '../../../src/components/export/SVGExporter';
test('mindplot generation of simple maps', () => {
// Load mindmap DOM ...
const mindmapPath = path.resolve(__dirname, './samples/welcome.xml');
const mapDocument = parseXMLFile(mindmapPath, 'text/xml');
// Convert to mindmap ...
const serializer = XMLSerializerFactory.getSerializerFromDocument(mapDocument);
const mindmap: Mindmap = serializer.loadFromDom(mapDocument, 'welcome');
// Load SVG ...
const svgPath = path.resolve(__dirname, './samples/welcome.svg');
const svgDocument = parseXMLFile(svgPath, 'image/svg+xml');
// Inspect ...
const exporter = new SVGExporter(mindmap, svgDocument.documentElement);
console.log(exporter.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) {
throw new Error(`Unexpected error parsing: ${filePath}. Error: ${new XMLSerializer().serializeToString(xmlDoc)}`);
}
return xmlDoc;
}
});

343
packages/mindplot/test/unit/export/samples/welcome.svg Normal file
View File

@ -0,0 +1,343 @@
<svg focusable="true" preserveAspectRatio="none" width="1440" height="900" viewBox="-607.7499999999999 -318.32500000000005 1224 765" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path style="fill:none " stroke-width="2px" stroke="#3f96ff" stroke-opacity="1" visibility="hidden"></path>
<path stroke-width="2px" stroke="#9b74e6" stroke-opacity="1" visibility="visible" d="M198,-166 L192.09129864709237,-164.95728799654572M198,-166 L196.95728799654572,-171.90870135290763"></path>
<path style="fill:none " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M-242,161 C-251,161 -262,190 -271,190"></path>
<path style="fill:none " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M-242,161 C-251,161 -262,158 -271,158"></path>
<path style="fill:none " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M-242,161 C-251,161 -262,126 -271,126"></path>
<path style="fill:#495879 " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M0,0 C-50,0 -100,161 -150,161 -100,164 -50,5 0,7 Z"></path>
<path style="fill:none " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M-296,81 C-305,81 -316,94 -325,94"></path>
<path style="fill:none " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M-296,81 C-305,81 -316,62 -325,62"></path>
<path style="fill:#495879 " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M0,0 C-50,0 -100,81 -150,81 -100,84 -50,5 0,7 Z"></path>
<path style="fill:none " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M245,133 C254,133 265,162 274,162"></path>
<path style="fill:none " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M245,133 C254,133 265,130 274,130"></path>
<path style="fill:none " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M245,133 C254,133 264,98 273,98"></path>
<path style="fill:#495879 " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M0,0 C50,0 100,133 150,133 100,136 50,5 0,7 Z"></path>
<path style="fill:none " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M-255,-15 C-264,-15 -275,30 -284,30"></path>
<path style="fill:none " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M-255,-15 C-264,-15 -275,-2 -284,-2"></path>
<path style="fill:none " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M-255,-15 C-264,-15 -275,-34 -284,-34"></path>
<path style="fill:none " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M-255,-15 C-264,-15 -275,-66 -284,-66"></path>
<path style="fill:#495879 " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M0,0 C-50,0 -100,-15 -150,-15 -100,-12 -50,5 0,7 Z"></path>
<path style="fill:none " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M213,-11 C222,-11 232,66 241,66"></path>
<path style="fill:none " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M213,-11 C222,-11 233,34 242,34"></path>
<path style="fill:none " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M283,-30 C292,-30 303,2 312,2"></path>
<path style="fill:none " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M283,-30 C292,-30 303,-30 312,-30"></path>
<path style="fill:none " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M283,-30 C292,-30 302,-62 311,-62"></path>
<path style="fill:none " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M213,-11 C222,-11 233,-30 242,-30"></path>
<path style="fill:none " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M213,-11 C222,-11 232,-94 241,-94"></path>
<path style="fill:#495879 " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M0,0 C50,0 100,-11 150,-11 100,-8 50,5 0,7 Z"></path>
<path style="fill:none " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M-239,-130 C-248,-130 -259,-98 -268,-98"></path>
<path style="fill:none " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M-239,-130 C-248,-130 -259,-130 -268,-130"></path>
<path style="fill:none " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M-239,-130 C-248,-130 -259,-167 -268,-167"></path>
<path style="fill:#495879 " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M0,0 C-50,0 -100,-130 -150,-130 -100,-127 -50,5 0,7 Z"></path>
<path style="fill:#495879 " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M0,0 C50,0 100,-126 150,-126 100,-123 50,5 0,7 Z"></path>
<rect width="50" height="6" rx="0" ry="0" x="5" y="5" stroke-width="1px" stroke="#FF9933" fill="#CC0033" stroke-opacity="0.4" fill-opacity="0.4" visibility="hidden"></rect>
<path style="fill:none " stroke-width="1px" stroke="#CC0033" stroke-opacity="0.4" fill-opacity="0.4" visibility="hidden"></path>
<path style="fill:none " stroke-width="1px" stroke="#CC0033" stroke-opacity="0.4" fill-opacity="0.4" visibility="hidden"></path>
<rect width="50" height="6" rx="0" ry="0" x="5" y="5" stroke-width="1px" stroke="#FF9933" fill="#CC0033" stroke-opacity="0.4" fill-opacity="0.4" visibility="hidden"></rect>
<g preserveAspectRatio="none" focusable="true" width="100" height="100" transform="translate(-120.00000,-18.00000) scale(1.00000,1.00000)" visibility="visible">
<rect width="245" height="43" rx="6.45" ry="6.45" x="-2" y="-3" stroke-width="1px" stroke="rgb(241,163,39)" fill="rgb(244,184,45)" stroke-opacity="1" fill-opacity="1" style="cursor: default;"></rect>
<rect width="241" height="37" rx="5.55" ry="5.55" x="0" y="0" stroke-width="2px" fill="rgb(80,157,192)" stroke="rgb(57,113,177)" style="cursor: default;"></rect>
<text font-family="Verdana" font-size="13.4375" font-style="normal" font-weight="bold" fill="#ffffff" visibility="visible" style="cursor: default;" y="10" x="32">
<tspan dy="1em" x="32">Welcome To WiseMapping</tspan>
</text>
<g preserveAspectRatio="none" focusable="true" width="20" height="20" transform="translate(8.00000,10.00000) scale(0.20000,0.20000)">
<image preserveAspectRatio="none" xlink:href="87b4e34ed4462c676f97.svg" width="90" height="90" y="5" x="5" style="cursor: pointer;"></image>
</g>
</g>
<g preserveAspectRatio="none" focusable="true" width="100" height="100" transform="translate(150.00000,-161.00000) scale(1.00000,1.00000)" visibility="visible">
<rect width="165" height="41" rx="6.1499999999999995" ry="6.1499999999999995" x="-2" y="-3" stroke-width="1px" stroke="rgb(241,163,39)" fill="rgb(252,235,192)" stroke-opacity="0" fill-opacity="0"></rect>
<line stroke-width="1px" stroke="#495879" stroke-opacity="1" style="cursor: move;" x1="0" y1="35" x2="161" y2="35"></line>
<text font-family="Verdana" font-size="10.75" font-style="normal" font-weight="normal" fill="rgb(82,92,97)" visibility="visible" style="cursor: move;" y="6" x="40">
<tspan dy="1em" x="40">5 min tutorial video ?</tspan>
<tspan dy="1em" x="40">Follow the link !</tspan>
</text>
<g preserveAspectRatio="none" focusable="true" width="31" height="15" transform="translate(6.00000,6.00000) scale(0.15500,0.15000)">
<image preserveAspectRatio="none" xlink:href="b5d8964fd96a656369d5.svg" width="90" height="90" y="5" x="5" style="cursor: pointer;"></image>
<image preserveAspectRatio="none" xlink:href="1c528f2105178b58d339.svg" width="90" height="90" style="cursor: pointer;" data-original-title="" title="" y="5" x="105"></image>
</g>
<ellipse width="6" height="6" rx="3" ry="3" cx="3" cy="3" stroke-width="1px" fill="rgb(224,229,239)" visibility="hidden" stroke="rgb(2,59,185)" style="cursor: default;"></ellipse>
</g>
<g preserveAspectRatio="none" focusable="true" width="100" height="100" transform="translate(-238.00000,-158.00000) scale(1.00000,1.00000)" visibility="visible">
<rect width="92" height="34" rx="5.1" ry="5.1" x="-2" y="-3" stroke-width="1px" stroke="rgb(241,163,39)" fill="rgb(252,235,192)" stroke-opacity="0" fill-opacity="0"></rect>
<line stroke-width="1px" stroke="#495879" stroke-opacity="1" style="cursor: move;" x1="0" y1="28" x2="88" y2="28"></line>
<text font-family="Verdana" font-size="10.75" font-style="normal" font-weight="normal" fill="#525c61" visibility="visible" style="cursor: move;" y="8" x="24">
<tspan dy="1em" x="24">Try it Now!</tspan>
</text>
<g preserveAspectRatio="none" focusable="true" width="15" height="15" transform="translate(6.00000,8.00000) scale(0.15000,0.15000)">
<image preserveAspectRatio="none" xlink:href="05c3a46e096665e2b73d.svg" width="90" height="90" y="5" x="5" style="cursor: pointer;"></image>
</g>
<ellipse width="6" height="6" rx="3" ry="3" cx="-3" cy="28" stroke-width="1px" fill="#250be3" visibility="visible" stroke="#080559" style="cursor: default;"></ellipse>
</g>
<g preserveAspectRatio="none" focusable="true" width="100" height="100" transform="translate(-334.00000,-189.00000) scale(1.00000,1.00000)" visibility="visible">
<rect width="70" height="28" rx="4.2" ry="4.2" x="-2" y="-3" stroke-width="1px" stroke="rgb(241,163,39)" fill="rgb(252,235,192)" stroke-opacity="0" fill-opacity="0"></rect>
<line stroke-width="1px" stroke="#495879" stroke-opacity="1" x1="0" y1="22" x2="66" y2="22" style="cursor: move;"></line>
<text font-family="Verdana" font-size="8.0625" font-style="italic" font-weight="normal" fill="#525c61" visibility="visible" style="cursor: move;" y="6" x="7">
<tspan dy="1em" x="7">Double Click</tspan>
</text>
<ellipse width="6" height="6" rx="3" ry="3" cx="3" cy="3" stroke-width="1px" fill="rgb(224,229,239)" visibility="hidden" stroke="rgb(2,59,185)" style="cursor: default;"></ellipse>
<g preserveAspectRatio="none" focusable="true" width="0" height="11"></g>
</g>
<g preserveAspectRatio="none" focusable="true" width="100" height="100" transform="translate(-376.00000,-157.00000) scale(1.00000,1.00000)" visibility="visible">
<rect width="112" height="33" rx="4.95" ry="4.95" x="-2" y="-3" stroke-width="1px" stroke="rgb(241,163,39)" fill="rgb(252,235,192)" stroke-opacity="0" fill-opacity="0"></rect>
<line stroke-width="1px" stroke="#495879" stroke-opacity="1" x1="0" y1="27" x2="108" y2="27" style="cursor: move;"></line>
<text font-family="Verdana" font-size="8.0625" font-style="normal" font-weight="normal" fill="rgb(82,92,97)" visibility="visible" style="cursor: move;" y="5" x="7">
<tspan dy="1em" x="7">Press "enter" to add a </tspan>
<tspan dy="1em" x="7">Sibling</tspan>
</text>
<ellipse width="6" height="6" rx="3" ry="3" cx="3" cy="3" stroke-width="1px" fill="rgb(224,229,239)" visibility="hidden" stroke="rgb(2,59,185)" style="cursor: default;"></ellipse>
<g preserveAspectRatio="none" focusable="true" width="0" height="11"></g>
</g>
<g preserveAspectRatio="none" focusable="true" width="100" height="100" transform="translate(-360.00000,-120.00000) scale(1.00000,1.00000)" visibility="visible">
<rect width="96" height="28" rx="4.2" ry="4.2" x="-2" y="-3" stroke-width="1px" stroke="rgb(241,163,39)" fill="rgb(252,235,192)" stroke-opacity="0" fill-opacity="0"></rect>
<line stroke-width="1px" stroke="#495879" stroke-opacity="1" x1="0" y1="22" x2="92" y2="22" style="cursor: move;"></line>
<text font-family="Verdana" font-size="8.0625" font-style="italic" font-weight="normal" fill="#525c61" visibility="visible" style="cursor: move;" y="6" x="7">
<tspan dy="1em" x="7">Drag map to move</tspan>
</text>
<ellipse width="6" height="6" rx="3" ry="3" cx="3" cy="3" stroke-width="1px" fill="rgb(224,229,239)" visibility="hidden" stroke="rgb(2,59,185)" style="cursor: default;"></ellipse>
<g preserveAspectRatio="none" focusable="true" width="0" height="11"></g>
</g>
<g preserveAspectRatio="none" focusable="true" width="100" height="100" transform="translate(150.00000,-39.00000) scale(1.00000,1.00000)" visibility="visible">
<rect width="65" height="34" rx="5.1" ry="5.1" x="-2" y="-3" stroke-width="1px" stroke="rgb(241,163,39)" fill="rgb(252,235,192)" stroke-opacity="0" fill-opacity="0"></rect>
<line stroke-width="1px" stroke="#495879" stroke-opacity="1" style="cursor: move;" x1="0" y1="28" x2="61" y2="28"></line>
<text font-family="Verdana" font-size="10.75" font-style="normal" font-weight="normal" fill="#525c61" visibility="visible" style="cursor: move;" y="8" x="9">
<tspan dy="1em" x="9">Features</tspan>
</text>
<ellipse width="6" height="6" rx="3" ry="3" cx="64" cy="28" stroke-width="1px" fill="rgb(224,229,239)" visibility="visible" stroke="rgb(2,59,185)" style="cursor: default;"></ellipse>
<g preserveAspectRatio="none" focusable="true" width="0" height="15"></g>
</g>
<g preserveAspectRatio="none" focusable="true" width="100" height="100" transform="translate(241.00000,-116.00000) scale(1.00000,1.00000)" visibility="visible">
<rect width="85" height="28" rx="4.2" ry="4.2" x="-2" y="-3" stroke-width="1px" stroke="rgb(241,163,39)" fill="rgb(252,235,192)" stroke-opacity="0" fill-opacity="0"></rect>
<line stroke-width="1px" stroke="#495879" stroke-opacity="1" x1="0" y1="22" x2="81" y2="22" style="cursor: move;"></line>
<text font-family="Verdana" font-size="8.0625" font-style="normal" font-weight="normal" fill="#525c61" visibility="visible" style="cursor: move;" y="6" x="18">
<tspan dy="1em" x="18">Links to Sites</tspan>
</text>
<g preserveAspectRatio="none" focusable="true" width="11" height="11" transform="translate(5.00000,6.00000) scale(0.11000,0.11000)">
<image preserveAspectRatio="none" xlink:href="1c528f2105178b58d339.svg" width="90" height="90" style="cursor: pointer;" data-original-title="" title="" y="5" x="5"></image>
</g>
<ellipse width="6" height="6" rx="3" ry="3" cx="3" cy="3" stroke-width="1px" fill="rgb(224,229,239)" visibility="hidden" stroke="rgb(2,59,185)" style="cursor: default;"></ellipse>
</g>
<g preserveAspectRatio="none" focusable="true" width="100" height="100" transform="translate(242.00000,-52.00000) scale(1.00000,1.00000)" visibility="visible">
<rect width="44" height="28" rx="4.2" ry="4.2" x="-2" y="-3" stroke-width="1px" stroke="rgb(241,163,39)" fill="rgb(252,235,192)" stroke-opacity="0" fill-opacity="0"></rect>
<line stroke-width="1px" stroke="#495879" stroke-opacity="1" x1="0" y1="22" x2="40" y2="22" style="cursor: move;"></line>
<text font-family="Verdana" font-size="8.0625" font-style="normal" font-weight="normal" fill="rgb(82,92,97)" visibility="visible" style="cursor: move;" y="6" x="7">
<tspan dy="1em" x="7">Styles</tspan>
</text>
<ellipse width="6" height="6" rx="3" ry="3" cx="43" cy="22" stroke-width="1px" fill="rgb(224,229,239)" visibility="visible" stroke="rgb(2,59,185)" style="cursor: default;"></ellipse>
<g preserveAspectRatio="none" focusable="true" width="0" height="11"></g>
</g>
<g preserveAspectRatio="none" focusable="true" width="100" height="100" transform="translate(311.00000,-84.00000) scale(1.00000,1.00000)" visibility="visible">
<rect width="41" height="28" rx="4.2" ry="4.2" x="-2" y="-3" stroke-width="1px" stroke="rgb(241,163,39)" fill="rgb(252,235,192)" stroke-opacity="0" fill-opacity="0"></rect>
<line stroke-width="1px" stroke="#495879" stroke-opacity="1" x1="0" y1="22" x2="37" y2="22" style="cursor: move;"></line>
<text font-family="Verdana" font-size="8.0625" font-style="normal" font-weight="normal" fill="#525c61" visibility="visible" style="cursor: move;" y="6" x="7">
<tspan dy="1em" x="7">Fonts</tspan>
</text>
<ellipse width="6" height="6" rx="3" ry="3" cx="3" cy="3" stroke-width="1px" fill="rgb(224,229,239)" visibility="hidden" stroke="rgb(2,59,185)" style="cursor: default;"></ellipse>
<g preserveAspectRatio="none" focusable="true" width="0" height="11"></g>
</g>
<g preserveAspectRatio="none" focusable="true" width="100" height="100" transform="translate(312.00000,-52.00000) scale(1.00000,1.00000)" visibility="visible">
<rect width="72" height="28" rx="4.2" ry="4.2" x="-2" y="-3" stroke-width="1px" stroke="rgb(241,163,39)" fill="rgb(252,235,192)" stroke-opacity="0" fill-opacity="0"></rect>
<line stroke-width="1px" stroke="#495879" stroke-opacity="1" style="cursor: move;" x1="0" y1="22" x2="68" y2="22"></line>
<text font-family="Verdana" font-size="8.0625" font-style="normal" font-weight="normal" fill="#525c61" visibility="visible" style="cursor: move;" y="6" x="7">
<tspan dy="1em" x="7">Topic Shapes</tspan>
</text>
<ellipse width="6" height="6" rx="3" ry="3" cx="3" cy="3" stroke-width="1px" fill="rgb(224,229,239)" visibility="hidden" stroke="rgb(2,59,185)" style="cursor: default;"></ellipse>
<g preserveAspectRatio="none" focusable="true" width="0" height="11"></g>
</g>
<g preserveAspectRatio="none" focusable="true" width="100" height="100" transform="translate(312.00000,-20.00000) scale(1.00000,1.00000)" visibility="visible">
<rect width="64" height="28" rx="4.2" ry="4.2" x="-2" y="-3" stroke-width="1px" stroke="rgb(241,163,39)" fill="rgb(252,235,192)" stroke-opacity="0" fill-opacity="0"></rect>
<line stroke-width="1px" stroke="#495879" stroke-opacity="1" x1="0" y1="22" x2="60" y2="22" style="cursor: move;"></line>
<text font-family="Verdana" font-size="8.0625" font-style="normal" font-weight="normal" fill="#525c61" visibility="visible" style="cursor: move;" y="6" x="7">
<tspan dy="1em" x="7">Topic Color</tspan>
</text>
<ellipse width="6" height="6" rx="3" ry="3" cx="3" cy="3" stroke-width="1px" fill="rgb(224,229,239)" visibility="hidden" stroke="rgb(2,59,185)" style="cursor: default;"></ellipse>
<g preserveAspectRatio="none" focusable="true" width="0" height="11"></g>
</g>
<g preserveAspectRatio="none" focusable="true" width="100" height="100" transform="translate(242.00000,12.00000) scale(1.00000,1.00000)" visibility="visible">
<rect width="52" height="28" rx="4.2" ry="4.2" x="-2" y="-3" stroke-width="1px" stroke="rgb(241,163,39)" fill="rgb(252,235,192)" stroke-opacity="0" fill-opacity="0"></rect>
<line stroke-width="1px" stroke="#495879" stroke-opacity="1" x1="0" y1="22" x2="48" y2="22" style="cursor: move;"></line>
<text font-family="Verdana" font-size="8.0625" font-style="normal" font-weight="normal" fill="#525c61" visibility="visible" style="cursor: move;" y="6" x="18">
<tspan dy="1em" x="18">Icons</tspan>
</text>
<g preserveAspectRatio="none" focusable="true" width="11" height="11" transform="translate(5.00000,6.00000) scale(0.11000,0.11000)">
<image preserveAspectRatio="none" xlink:href="5e06f9581efd8466b8df.svg" width="90" height="90" y="5" x="5" style="cursor: pointer;"></image>
</g>
<ellipse width="6" height="6" rx="3" ry="3" cx="3" cy="3" stroke-width="1px" fill="rgb(224,229,239)" visibility="hidden" stroke="rgb(2,59,185)" style="cursor: default;"></ellipse>
</g>
<g preserveAspectRatio="none" focusable="true" width="100" height="100" transform="translate(241.00000,44.00000) scale(1.00000,1.00000)" visibility="visible">
<rect width="97" height="28" rx="4.2" ry="4.2" x="-2" y="-3" stroke-width="1px" stroke="rgb(241,163,39)" fill="rgb(252,235,192)" stroke-opacity="0" fill-opacity="0"></rect>
<line stroke-width="1px" stroke="#495879" stroke-opacity="1" x1="0" y1="22" x2="93" y2="22" style="cursor: move;"></line>
<text font-family="Verdana" font-size="8.0625" font-style="normal" font-weight="normal" fill="#525c61" visibility="visible" style="cursor: move;" y="6" x="18">
<tspan dy="1em" x="18">History Changes</tspan>
</text>
<g preserveAspectRatio="none" focusable="true" width="11" height="11" transform="translate(5.00000,6.00000) scale(0.11000,0.11000)">
<image preserveAspectRatio="none" xlink:href="8d157d5bba7dccb92fb6.svg" width="90" height="90" y="5" x="5" style="cursor: pointer;"></image>
</g>
<ellipse width="6" height="6" rx="3" ry="3" cx="3" cy="3" stroke-width="1px" fill="rgb(224,229,239)" visibility="hidden" stroke="rgb(2,59,185)" style="cursor: default;"></ellipse>
</g>
<g preserveAspectRatio="none" focusable="true" width="100" height="100" transform="translate(-254.00000,-43.00000) scale(1.00000,1.00000)" visibility="visible">
<rect width="108" height="34" rx="5.1" ry="5.1" x="-2" y="-3" stroke-width="1px" stroke="rgb(241,163,39)" fill="rgb(252,235,192)" stroke-opacity="0" fill-opacity="0"></rect>
<line stroke-width="1px" stroke="#495879" stroke-opacity="1" style="cursor: move;" x1="0" y1="28" x2="104" y2="28"></line>
<text font-family="Verdana" font-size="10.75" font-style="normal" font-weight="normal" fill="#525c61" visibility="visible" style="cursor: move;" y="8" x="24">
<tspan dy="1em" x="24">Mind Mapping</tspan>
</text>
<g preserveAspectRatio="none" focusable="true" width="15" height="15" transform="translate(6.00000,8.00000) scale(0.15000,0.15000)">
<image preserveAspectRatio="none" xlink:href="efcc09caadd59213512f.svg" width="90" height="90" y="5" x="5" style="cursor: pointer;"></image>
</g>
<ellipse width="6" height="6" rx="3" ry="3" cx="-3" cy="28" stroke-width="1px" fill="#edabff" visibility="visible" stroke="rgb(2,59,185)" style="cursor: default;"></ellipse>
</g>
<g preserveAspectRatio="none" focusable="true" width="100" height="100" transform="translate(-385.00000,-88.00000) scale(1.00000,1.00000)" visibility="visible">
<rect width="105" height="28" rx="4.2" ry="4.2" x="-2" y="-3" stroke-width="1px" stroke="rgb(241,163,39)" fill="rgb(252,235,192)" stroke-opacity="0" fill-opacity="0"></rect>
<line stroke-width="1px" stroke="#495879" stroke-opacity="1" x1="0" y1="22" x2="101" y2="22" style="cursor: move;"></line>
<text font-family="Verdana" font-size="8.0625" font-style="normal" font-weight="normal" fill="#525c61" visibility="visible" style="cursor: move;" y="6" x="7">
<tspan dy="1em" x="7">Share with Collegues</tspan>
</text>
<ellipse width="6" height="6" rx="3" ry="3" cx="3" cy="3" stroke-width="1px" fill="rgb(224,229,239)" visibility="hidden" stroke="rgb(2,59,185)" style="cursor: default;"></ellipse>
<g preserveAspectRatio="none" focusable="true" width="0" height="11"></g>
</g>
<g preserveAspectRatio="none" focusable="true" width="100" height="100" transform="translate(-325.00000,-56.00000) scale(1.00000,1.00000)" visibility="visible">
<rect width="45" height="28" rx="4.2" ry="4.2" x="-2" y="-3" stroke-width="1px" stroke="rgb(241,163,39)" fill="rgb(252,235,192)" stroke-opacity="0" fill-opacity="0"></rect>
<line stroke-width="1px" stroke="#495879" stroke-opacity="1" x1="0" y1="22" x2="41" y2="22" style="cursor: move;"></line>
<text font-family="Verdana" font-size="8.0625" font-style="normal" font-weight="normal" fill="#525c61" visibility="visible" style="cursor: move;" y="6" x="7">
<tspan dy="1em" x="7">Online</tspan>
</text>
<ellipse width="6" height="6" rx="3" ry="3" cx="3" cy="3" stroke-width="1px" fill="rgb(224,229,239)" visibility="hidden" stroke="rgb(2,59,185)" style="cursor: default;"></ellipse>
<g preserveAspectRatio="none" focusable="true" width="0" height="11"></g>
</g>
<g preserveAspectRatio="none" focusable="true" width="100" height="100" transform="translate(-375.00000,-24.00000) scale(1.00000,1.00000)" visibility="visible">
<rect width="95" height="28" rx="4.2" ry="4.2" x="-2" y="-3" stroke-width="1px" stroke="rgb(241,163,39)" fill="rgb(252,235,192)" stroke-opacity="0" fill-opacity="0"></rect>
<line stroke-width="1px" stroke="#495879" stroke-opacity="1" x1="0" y1="22" x2="91" y2="22" style="cursor: move;"></line>
<text font-family="Verdana" font-size="8.0625" font-style="normal" font-weight="normal" fill="#525c61" visibility="visible" style="cursor: move;" y="6" x="7">
<tspan dy="1em" x="7">Anyplace, Anytime</tspan>
</text>
<ellipse width="6" height="6" rx="3" ry="3" cx="3" cy="3" stroke-width="1px" fill="rgb(224,229,239)" visibility="hidden" stroke="rgb(2,59,185)" style="cursor: default;"></ellipse>
<g preserveAspectRatio="none" focusable="true" width="0" height="11"></g>
</g>
<g preserveAspectRatio="none" focusable="true" width="100" height="100" transform="translate(-327.00000,8.00000) scale(1.00000,1.00000)" visibility="visible">
<rect width="47" height="28" rx="4.2" ry="4.2" x="-2" y="-3" stroke-width="1px" stroke="rgb(241,163,39)" fill="rgb(252,235,192)" stroke-opacity="0" fill-opacity="0"></rect>
<line stroke-width="1px" stroke="#495879" stroke-opacity="1" x1="0" y1="22" x2="43" y2="22" style="cursor: move;"></line>
<text font-family="Verdana" font-size="8.0625" font-style="normal" font-weight="normal" fill="#525c61" visibility="visible" style="cursor: move;" y="6" x="7">
<tspan dy="1em" x="7">Free!!!</tspan>
</text>
<ellipse width="6" height="6" rx="3" ry="3" cx="3" cy="3" stroke-width="1px" fill="rgb(224,229,239)" visibility="hidden" stroke="rgb(2,59,185)" style="cursor: default;"></ellipse>
<g preserveAspectRatio="none" focusable="true" width="0" height="11"></g>
</g>
<g preserveAspectRatio="none" focusable="true" width="100" height="100" transform="translate(150.00000,105.00000) scale(1.00000,1.00000)" visibility="visible">
<rect width="97" height="34" rx="5.1" ry="5.1" x="-2" y="-3" stroke-width="1px" stroke="rgb(241,163,39)" fill="rgb(252,235,192)" stroke-opacity="0" fill-opacity="0"></rect>
<line stroke-width="1px" stroke="#495879" stroke-opacity="1" style="cursor: move;" x1="0" y1="28" x2="93" y2="28"></line>
<text font-family="Verdana" font-size="10.75" font-style="normal" font-weight="normal" fill="#525c61" visibility="visible" style="cursor: move;" y="8" x="24">
<tspan dy="1em" x="24">Productivity</tspan>
</text>
<g preserveAspectRatio="none" focusable="true" width="15" height="15" transform="translate(6.00000,8.00000) scale(0.15000,0.15000)">
<image preserveAspectRatio="none" xlink:href="9451621eb0641f9bfed6.svg" width="90" height="90" y="5" x="5" style="cursor: pointer;"></image>
</g>
<ellipse width="6" height="6" rx="3" ry="3" cx="96" cy="28" stroke-width="1px" fill="#d9b518" visibility="visible" stroke="rgb(2,59,185)" style="cursor: default;"></ellipse>
</g>
<g preserveAspectRatio="none" focusable="true" width="100" height="100" transform="translate(273.00000,76.00000) scale(1.00000,1.00000)" visibility="visible">
<rect width="99" height="28" rx="4.2" ry="4.2" x="-2" y="-3" stroke-width="1px" stroke="rgb(241,163,39)" fill="rgb(252,235,192)" stroke-opacity="0" fill-opacity="0"></rect>
<line stroke-width="1px" stroke="#495879" stroke-opacity="1" x1="0" y1="22" x2="95" y2="22" style="cursor: move;"></line>
<text font-family="Verdana" font-size="8.0625" font-style="normal" font-weight="normal" fill="#525c61" visibility="visible" style="cursor: move;" y="6" x="18">
<tspan dy="1em" x="18">Share your ideas</tspan>
</text>
<g preserveAspectRatio="none" focusable="true" width="11" height="11" transform="translate(5.00000,6.00000) scale(0.11000,0.11000)">
<image preserveAspectRatio="none" xlink:href="1aaf10f7785ebae7edce.svg" width="90" height="90" y="5" x="5" style="cursor: pointer;"></image>
</g>
<ellipse width="6" height="6" rx="3" ry="3" cx="3" cy="3" stroke-width="1px" fill="rgb(224,229,239)" visibility="hidden" stroke="rgb(2,59,185)" style="cursor: default;"></ellipse>
</g>
<g preserveAspectRatio="none" focusable="true" width="100" height="100" transform="translate(274.00000,108.00000) scale(1.00000,1.00000)" visibility="visible">
<rect width="76" height="28" rx="4.2" ry="4.2" x="-2" y="-3" stroke-width="1px" stroke="rgb(241,163,39)" fill="rgb(252,235,192)" stroke-opacity="0" fill-opacity="0"></rect>
<line stroke-width="1px" stroke="#495879" stroke-opacity="1" x1="0" y1="22" x2="72" y2="22" style="cursor: move;"></line>
<text font-family="Verdana" font-size="8.0625" font-style="normal" font-weight="normal" fill="#525c61" visibility="visible" style="cursor: move;" y="6" x="7">
<tspan dy="1em" x="7">Brainstorming</tspan>
</text>
<ellipse width="6" height="6" rx="3" ry="3" cx="3" cy="3" stroke-width="1px" fill="rgb(224,229,239)" visibility="hidden" stroke="rgb(2,59,185)" style="cursor: default;"></ellipse>
<g preserveAspectRatio="none" focusable="true" width="0" height="11"></g>
</g>
<g preserveAspectRatio="none" focusable="true" width="100" height="100" transform="translate(274.00000,140.00000) scale(1.00000,1.00000)" visibility="visible">
<rect width="44" height="28" rx="4.2" ry="4.2" x="-2" y="-3" stroke-width="1px" stroke="rgb(241,163,39)" fill="rgb(252,235,192)" stroke-opacity="0" fill-opacity="0"></rect>
<line stroke-width="1px" stroke="#495879" stroke-opacity="1" x1="0" y1="22" x2="40" y2="22" style="cursor: move;"></line>
<text font-family="Verdana" font-size="8.0625" font-style="normal" font-weight="normal" fill="#525c61" visibility="visible" style="cursor: move;" y="6" x="7">
<tspan dy="1em" x="7">Visual </tspan>
</text>
<ellipse width="6" height="6" rx="3" ry="3" cx="3" cy="3" stroke-width="1px" fill="rgb(224,229,239)" visibility="hidden" stroke="rgb(2,59,185)" style="cursor: default;"></ellipse>
<g preserveAspectRatio="none" focusable="true" width="0" height="11"></g>
</g>
<g preserveAspectRatio="none" focusable="true" width="100" height="100" transform="translate(-295.00000,53.00000) scale(1.00000,1.00000)" visibility="visible">
<rect width="149" height="34" rx="5.1" ry="5.1" x="-2" y="-3" stroke-width="1px" stroke="rgb(241,163,39)" fill="rgb(252,235,192)" stroke-opacity="0" fill-opacity="0"></rect>
<line stroke-width="1px" stroke="#495879" stroke-opacity="1" style="cursor: move;" x1="0" y1="28" x2="145" y2="28"></line>
<text font-family="Verdana" font-size="10.75" font-style="normal" font-weight="normal" fill="#525c61" visibility="visible" style="cursor: move;" y="8" x="24">
<tspan dy="1em" x="24">Install In Your Server</tspan>
</text>
<g preserveAspectRatio="none" focusable="true" width="15" height="15" transform="translate(6.00000,8.00000) scale(0.15000,0.15000)">
<image preserveAspectRatio="none" xlink:href="b5d8964fd96a656369d5.svg" width="90" height="90" y="5" x="5" style="cursor: pointer;"></image>
</g>
<ellipse width="6" height="6" rx="3" ry="3" cx="-3" cy="28" stroke-width="1px" fill="rgb(224,229,239)" visibility="visible" stroke="rgb(2,59,185)" style="cursor: default;"></ellipse>
</g>
<g preserveAspectRatio="none" focusable="true" width="100" height="100" transform="translate(-416.00000,40.00000) scale(1.00000,1.00000)" visibility="visible">
<rect width="95" height="28" rx="4.2" ry="4.2" x="-2" y="-3" stroke-width="1px" stroke="rgb(241,163,39)" fill="rgb(252,235,192)" stroke-opacity="0" fill-opacity="0"></rect>
<line stroke-width="1px" stroke="#495879" stroke-opacity="1" x1="0" y1="22" x2="91" y2="22" style="cursor: move;"></line>
<text font-family="Verdana" font-size="8.0625" font-style="normal" font-weight="normal" fill="#525c61" visibility="visible" style="cursor: move;" y="6" x="30">
<tspan dy="1em" x="30">Open Source</tspan>
</text>
<g preserveAspectRatio="none" focusable="true" width="23" height="11" transform="translate(5.00000,6.00000) scale(0.11500,0.11000)">
<image preserveAspectRatio="none" xlink:href="208f1b86edc4b6ab2931.svg" width="90" height="90" y="5" x="5" style="cursor: pointer;"></image>
<image preserveAspectRatio="none" xlink:href="1c528f2105178b58d339.svg" width="90" height="90" style="cursor: pointer;" data-original-title="" title="" y="5" x="105"></image>
</g>
<ellipse width="6" height="6" rx="3" ry="3" cx="3" cy="3" stroke-width="1px" fill="rgb(224,229,239)" visibility="hidden" stroke="rgb(2,59,185)" style="cursor: default;"></ellipse>
</g>
<g preserveAspectRatio="none" focusable="true" width="100" height="100" transform="translate(-391.00000,72.00000) scale(1.00000,1.00000)" visibility="visible">
<rect width="70" height="28" rx="4.2" ry="4.2" x="-2" y="-3" stroke-width="1px" stroke="rgb(241,163,39)" fill="rgb(252,235,192)" stroke-opacity="0" fill-opacity="0"></rect>
<line stroke-width="1px" stroke="#495879" stroke-opacity="1" x1="0" y1="22" x2="66" y2="22" style="cursor: move;"></line>
<text font-family="Verdana" font-size="8.0625" font-style="normal" font-weight="normal" fill="#525c61" visibility="visible" style="cursor: move;" y="6" x="18">
<tspan dy="1em" x="18">Download</tspan>
</text>
<g preserveAspectRatio="none" focusable="true" width="11" height="11" transform="translate(5.00000,6.00000) scale(0.11000,0.11000)">
<image preserveAspectRatio="none" xlink:href="1c528f2105178b58d339.svg" width="90" height="90" style="cursor: pointer;" data-original-title="" title="" y="5" x="5"></image>
</g>
<ellipse width="6" height="6" rx="3" ry="3" cx="3" cy="3" stroke-width="1px" fill="rgb(224,229,239)" visibility="hidden" stroke="rgb(2,59,185)" style="cursor: default;"></ellipse>
</g>
<g preserveAspectRatio="none" focusable="true" width="100" height="100" transform="translate(-241.00000,133.00000) scale(1.00000,1.00000)" visibility="visible">
<rect width="95" height="34" rx="5.1" ry="5.1" x="-2" y="-3" stroke-width="1px" stroke="rgb(241,163,39)" fill="rgb(252,235,192)" stroke-opacity="0" fill-opacity="0"></rect>
<line stroke-width="1px" stroke="#495879" stroke-opacity="1" style="cursor: move;" x1="0" y1="28" x2="91" y2="28"></line>
<text font-family="Verdana" font-size="10.75" font-style="normal" font-weight="normal" fill="rgb(82,92,97)" visibility="visible" style="cursor: move;" y="8" x="24">
<tspan dy="1em" x="24">Collaborate</tspan>
</text>
<g preserveAspectRatio="none" focusable="true" width="15" height="15" transform="translate(6.00000,8.00000) scale(0.15000,0.15000)">
<image preserveAspectRatio="none" xlink:href="dd3504c0f36bd63b5a5a.png" width="90" height="90" y="5" x="5" style="cursor: pointer;"></image>
</g>
<ellipse width="6" height="6" rx="3" ry="3" cx="-3" cy="28" stroke-width="1px" fill="rgb(224,229,239)" visibility="visible" stroke="rgb(2,59,185)" style="cursor: default;"></ellipse>
</g>
<g preserveAspectRatio="none" focusable="true" width="100" height="100" transform="translate(-314.00000,104.00000) scale(1.00000,1.00000)" visibility="visible">
<rect width="47" height="28" rx="4.2" ry="4.2" x="-2" y="-3" stroke-width="1px" stroke="rgb(241,163,39)" fill="rgb(252,235,192)" stroke-opacity="0" fill-opacity="0"></rect>
<line stroke-width="1px" stroke="#495879" stroke-opacity="1" x1="0" y1="22" x2="43" y2="22" style="cursor: move;"></line>
<text font-family="Verdana" font-size="8.0625" font-style="normal" font-weight="normal" fill="rgb(82,92,97)" visibility="visible" style="cursor: move;" y="6" x="7">
<tspan dy="1em" x="7">Embed</tspan>
</text>
<ellipse width="6" height="6" rx="3" ry="3" cx="3" cy="3" stroke-width="1px" fill="rgb(224,229,239)" visibility="hidden" stroke="rgb(2,59,185)" style="cursor: default;"></ellipse>
<g preserveAspectRatio="none" focusable="true" width="0" height="11"></g>
</g>
<g preserveAspectRatio="none" focusable="true" width="100" height="100" transform="translate(-315.00000,136.00000) scale(1.00000,1.00000)" visibility="visible">
<rect width="48" height="28" rx="4.2" ry="4.2" x="-2" y="-3" stroke-width="1px" stroke="rgb(241,163,39)" fill="rgb(252,235,192)" stroke-opacity="0" fill-opacity="0"></rect>
<line stroke-width="1px" stroke="#495879" stroke-opacity="1" x1="0" y1="22" x2="44" y2="22" style="cursor: move;"></line>
<text font-family="Verdana" font-size="8.0625" font-style="normal" font-weight="normal" fill="rgb(82,92,97)" visibility="visible" style="cursor: move;" y="6" x="7">
<tspan dy="1em" x="7">Publish</tspan>
</text>
<ellipse width="6" height="6" rx="3" ry="3" cx="3" cy="3" stroke-width="1px" fill="rgb(224,229,239)" visibility="hidden" stroke="rgb(2,59,185)" style="cursor: default;"></ellipse>
<g preserveAspectRatio="none" focusable="true" width="0" height="11"></g>
</g>
<g preserveAspectRatio="none" focusable="true" width="100" height="100" transform="translate(-366.00000,168.00000) scale(1.00000,1.00000)" visibility="visible">
<rect width="99" height="28" rx="4.2" ry="4.2" x="-2" y="-3" stroke-width="1px" stroke="rgb(241,163,39)" fill="rgb(252,235,192)" stroke-opacity="0" fill-opacity="0"></rect>
<line stroke-width="1px" stroke="#495879" stroke-opacity="1" x1="0" y1="22" x2="95" y2="22" style="cursor: move;"></line>
<text font-family="Verdana" font-size="8.0625" font-style="normal" font-weight="normal" fill="rgb(82,92,97)" visibility="visible" style="cursor: move;" y="6" x="18">
<tspan dy="1em" x="18">Share for Edition</tspan>
</text>
<g preserveAspectRatio="none" focusable="true" width="11" height="11" transform="translate(5.00000,6.00000) scale(0.11000,0.11000)">
<image preserveAspectRatio="none" xlink:href="e1d10870978e1ff40621.svg" width="90" height="90" y="5" x="5" style="cursor: pointer;"></image>
</g>
<ellipse width="6" height="6" rx="3" ry="3" cx="3" cy="3" stroke-width="1px" fill="rgb(224,229,239)" visibility="hidden" stroke="rgb(2,59,185)" style="cursor: default;"></ellipse>
</g>
<ellipse width="6" height="6" rx="3" ry="3" cx="8" cy="8" stroke-width="1px" stroke="#6589de" fill="gray" visibility="hidden" style="cursor: pointer;"></ellipse>
<ellipse width="6" height="6" rx="3" ry="3" cx="8" cy="8" stroke-width="1px" stroke="#6589de" fill="gray" visibility="hidden" style="cursor: pointer;"></ellipse>
<line stroke-width="1px" stroke="#6589de" stroke-opacity="0.3" fill-opacity="0.3"></line>
<line stroke-width="1px" stroke="#6589de" stroke-opacity="0.3" fill-opacity="0.3"></line>
<path style="fill: none; cursor: pointer;" stroke-width="2px" stroke="#9b74e6" stroke-opacity="1" fill="#495879" fill-opacity="1" stroke-dasharray="4,2" visibility="visible" d="M198,-166 C118,-222 -65,-279 -175,-163"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

70
packages/mindplot/test/unit/export/samples/welcome.xml Normal file
View File

@ -0,0 +1,70 @@
<map name="3" version="tango">
<topic central="true" text="Welcome To WiseMapping" id="1" fontStyle=";;#ffffff;;;">
<icon id="sign_info"/>
<topic position="199,-112" order="0" id="30">
<text><![CDATA[5 min tutorial video ?
Follow the link !]]></text>
<link url="https://www.youtube.com/tv?vq=medium#/watch?v=rKxZwNKs9cE" urlType="url"/>
<icon id="hard_computer"/>
</topic>
<topic position="-167,-112" order="1" text="Try it Now!" id="11" fontStyle=";;#525c61;;;" bgColor="#250be3" brColor="#080559">
<icon id="face_surprise"/>
<topic position="-260,-141" order="0" text="Double Click" id="12" fontStyle=";;#525c61;;italic;"/>
<topic position="-278,-112" order="1" id="13">
<text><![CDATA[Press "enter" to add a
Sibling]]></text>
</topic>
<topic position="-271,-83" order="2" text="Drag map to move" id="14" fontStyle=";;#525c61;;italic;"/>
</topic>
<topic position="155,-18" order="2" text="Features" id="15" fontStyle=";;#525c61;;;">
<topic position="244,-80" order="0" text="Links to Sites" id="16" fontStyle=";6;#525c61;;;">
<link url="http://www.digg.com" urlType="url"/>
</topic>
<topic position="224,-30" order="1" text="Styles" id="31">
<topic position="285,-55" order="0" text="Fonts" id="17" fontStyle=";;#525c61;;;"/>
<topic position="299,-30" order="1" text="Topic Shapes" shape="line" id="19" fontStyle=";;#525c61;;;"/>
<topic position="295,-5" order="2" text="Topic Color" id="18" fontStyle=";;#525c61;;;"/>
</topic>
<topic position="229,20" order="2" text="Icons" id="20" fontStyle=";;#525c61;;;">
<icon id="object_rainbow"/>
</topic>
<topic position="249,45" order="3" text="History Changes" id="21" fontStyle=";;#525c61;;;">
<icon id="arrowc_turn_left"/>
</topic>
</topic>
<topic position="-176,-21" order="3" text="Mind Mapping" id="6" fontStyle=";;#525c61;;;" bgColor="#edabff">
<icon id="thumb_thumb_up"/>
<topic position="-293,-58" order="0" text="Share with Collegues" id="7" fontStyle=";;#525c61;;;"/>
<topic position="-266,-33" order="1" text="Online" id="8" fontStyle=";;#525c61;;;"/>
<topic position="-288,-8" order="2" text="Anyplace, Anytime" id="9" fontStyle=";;#525c61;;;"/>
<topic position="-266,17" order="3" text="Free!!!" id="10" fontStyle=";;#525c61;;;"/>
</topic>
<topic position="171,95" order="4" text="Productivity" id="2" fontStyle=";;#525c61;;;" bgColor="#d9b518">
<icon id="chart_bar"/>
<topic position="281,70" order="0" text="Share your ideas" id="3" fontStyle=";;#525c61;;;">
<icon id="bulb_light_on"/>
</topic>
<topic position="270,95" order="1" text="Brainstorming" id="4" fontStyle=";;#525c61;;;"/>
<topic position="256,120" order="2" text="Visual " id="5" fontStyle=";;#525c61;;;"/>
</topic>
<topic position="-191,54" order="5" text="Install In Your Server" id="27" fontStyle=";;#525c61;;;">
<icon id="hard_computer"/>
<topic position="-319,42" order="0" text="Open Source" id="29" fontStyle=";;#525c61;;;">
<icon id="soft_penguin"/>
<link url="http://www.wisemapping.org/" urlType="url"/>
</topic>
<topic position="-310,67" order="1" text="Download" id="28" fontStyle=";;#525c61;;;">
<link url="http://www.wisemapping.com/inyourserver.html" urlType="url"/>
</topic>
</topic>
<topic position="-169,117" order="7" text="Collaborate" id="32">
<icon id="people_group"/>
<topic position="-253,92" order="0" text="Embed" id="33"/>
<topic position="-254,117" order="1" text="Publish" id="34"/>
<topic position="-277,142" order="2" text="Share for Edition" id="35">
<icon id="mail_envelop"/>
</topic>
</topic>
</topic>
<relationship srcTopicId="30" destTopicId="11" lineType="3" srcCtrlPoint="-80,-56" destCtrlPoint="110,-116" endArrow="false" startArrow="true"/>
</map>

2
packages/mindplot/test/unit/BalancedTestSuite.test.js → packages/mindplot/test/unit/layout/BalancedTestSuite.test.js
View File

@ -1,5 +1,5 @@
import TestSuite from './TestSuite';
import LayoutManager from '../../src/components/layout/LayoutManager';
import LayoutManager from '../../../src/components/layout/LayoutManager';
describe('Balanced Test Suite', () => {
describe('balancedTest', () => {

2
packages/mindplot/test/unit/EventsTestSuite.test.js → packages/mindplot/test/unit/layout/EventsTestSuite.test.js
View File

@ -1,4 +1,4 @@
import Events from '../../src/components/Events';
import Events from '../../../src/components/Events';
describe('Events class suite', () => {
class TestClass extends Events {

2
packages/mindplot/test/unit/FreeTestSuite.test.js → packages/mindplot/test/unit/layout/FreeTestSuite.test.js
View File

@ -1,5 +1,5 @@
import TestSuite from './TestSuite';
import LayoutManager from '../../src/components/layout/LayoutManager';
import LayoutManager from '../../../src/components/layout/LayoutManager';
expect.extend({
toNotBeBranchesOverlap(received, expected) {

2
packages/mindplot/test/unit/SymmetricTestSuite.test.js → packages/mindplot/test/unit/layout/SymmetricTestSuite.test.js
View File

@ -1,5 +1,5 @@
import TestSuite from './TestSuite';
import LayoutManager from '../../src/components/layout/LayoutManager';
import LayoutManager from '../../../src/components/layout/LayoutManager';
describe('Symmetric Test Suite', () => {
describe('symmetricTest', () => {

0
packages/mindplot/test/unit/TestSuite.js → packages/mindplot/test/unit/layout/TestSuite.js
View File

48
packages/mindplot/test/unit/resources/welcome.xml
View File

@ -1,48 +0,0 @@
<map name="welcome" version="tango">
<topic central="true" text="Welcome To WiseMapping" id="1" fontStyle=";;#dfcfe6;;;" bgColor="#0a0a08">
<topic position="178,-130" order="0" text="Try it Now!" id="11" fontStyle=";;#ffffff;;;" bgColor="#250be3"
brColor="#080559">
<topic position="272,-156" order="0" text="Double Click" id="12" fontStyle=";;#001be6;;italic;"/>
<topic position="274,-130" order="1" text=" INS to insert" id="13" fontStyle=";;#001be6;;italic;"/>
<topic position="285,-104" order="2" text="Drag map to move" id="14" fontStyle=";;#001be6;;italic;"/>
</topic>
<topic position="-189,-52" order="1" text="Productivity" id="2" fontStyle=";;#104f11;;;" bgColor="#d9b518">
<icon id="chart_bar"/>
<topic position="-310,-104" order="0" text="Share your ideas" id="3">
<icon id="bulb_light_on"/>
</topic>
<topic position="-299,-25" order="2" text="Brainstorming" id="4"/>
<topic position="-283,1" order="3" text="Visual " id="5"/>
<topic position="-307,-65" order="1" shape="image" image="80,43:images/logo-small.png" id="27"
metadata="{'media':'video,'url':'http://www.youtube.com/watch?v=P3FrXftyuzw&amp;feature=g-vrec&amp;context=G2b4ab69RVAAAAAAAAAA'}"/>
</topic>
<topic position="185,-39" order="2" text="Mind Mapping" id="6" fontStyle=";;#602378;;;" bgColor="#edabff">
<topic position="303,-78" order="0" text="Share with Collegues" id="7"/>
<topic position="275,-52" order="1" text="Online" id="8"/>
<topic position="299,-26" order="2" text="Anyplace, Anytime" id="9"/>
<topic position="277,0" order="3" text="Free!!!" id="10"/>
</topic>
<topic position="-183,66" order="3" text="Web 2.0 Tool" id="22" fontStyle=";;#0c1d6b;;;" bgColor="#add1f7">
<topic position="-281,27" order="0" text="Collaborate" id="23"/>
<topic position="-302,53" order="1" text="No plugin required" id="24">
<icon id="conn_disconnect"/>
</topic>
<topic position="-271,79" order="2" text="Share" id="25"/>
<topic position="-282,105" order="3" text="Easy to use" id="26"/>
</topic>
<topic position="171,91" order="4" text="Features" id="15">
<topic position="266,26" order="0" text="Links to Sites" id="16" fontStyle=";6;;;;">
<link url="http://www.digg.com" type="url"/>
</topic>
<topic position="245,52" order="1" text="Fonts" id="17"/>
<topic position="255,78" order="2" text="Topic Color" id="18"/>
<topic position="260,104" order="3" text="Topic Shapes" shape="line" id="19"/>
<topic position="252,130" order="4" text="Icons" id="20">
<icon id="object_rainbow"/>
</topic>
<topic position="272,156" order="5" text="History Changes" id="21">
<icon id="arrowc_turn_left"/>
</topic>
</topic>
</topic>
</map>

5
packages/mindplot/webpack.common.js
View File

@ -5,7 +5,6 @@ module.exports = {
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
publicPath: '',
library: {
type: 'umd',
},
@ -35,8 +34,8 @@ module.exports = {
exclude: '/node_modules/',
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
test: /\.(png|svg)$/i,
type: 'asset/inline',
},
],
},

2
packages/web2d/src/components/peer/utils/DomUtils.js
View File

@ -1,4 +1,4 @@
/* eslint-disable import/prefer-default-export */
import { $defined } from '@wisemapping/core-js';
// quick hand-made version of $.css()
export const getStyle = (elem, prop) => {

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

@ -17,7 +17,6 @@
*/
import Workspace from './components/Workspace';
import Toolkit from './components/Toolkit';
import Elipse from './components/Elipse';
import Line from './components/Line';
import PolyLine from './components/PolyLine';
@ -42,6 +41,5 @@ export {
PolyLine,
Rect,
Text,
Toolkit,
Workspace,
};

14
packages/web2d/test/playground/arrow.js
View File

@ -1,22 +1,20 @@
import $ from 'jquery';
import {
Toolkit, Workspace, Arrow, Point,
Workspace, Arrow, Point,
} from '../../src';
Toolkit.init();
const overflowWorkspace = new Workspace({ fillColor: 'green' });
overflowWorkspace.setSize('200px', '200px');
const workspace = new Workspace({ fillColor: 'green' });
workspace.setSize('200px', '200px');
const arrow = new Arrow();
arrow.setFrom(50, 50);
arrow.setControlPoint(new Point(-50, 0));
overflowWorkspace.append(arrow);
workspace.append(arrow);
const arrow2 = new Arrow();
arrow2.setFrom(100, 50);
arrow2.setControlPoint(new Point(50, 50));
overflowWorkspace.append(arrow2);
workspace.append(arrow2);
overflowWorkspace.addItAsChildTo($('#overflowExample').first());
workspace.addItAsChildTo($('#overflowExample').first());

14
packages/web2d/test/playground/curvedLine.js
View File

@ -1,19 +1,17 @@
import $ from 'jquery';
import {
Toolkit, Workspace, CurvedLine, Point,
Workspace, CurvedLine, Point,
} from '../../src';
Toolkit.init();
const overflowWorkspace = new Workspace({ fillColor: 'green' });
overflowWorkspace.setSize('400px', '400px');
const workspace = new Workspace({ fillColor: 'green' });
workspace.setSize('400px', '400px');
const line1 = new CurvedLine();
line1.setStyle(CurvedLine.SIMPLE_LINE);
line1.setFrom(200, 200);
line1.setTo(100, 100);
line1.setSrcControlPoint(new Point(-100, 0));
line1.setDestControlPoint(new Point(100, 0));
overflowWorkspace.append(line1);
workspace.append(line1);
const line2 = new CurvedLine();
line2.setStyle(CurvedLine.NICE_LINE);
@ -21,6 +19,6 @@ line2.setFrom(0, 0);
line2.setTo(150, 90);
line2.setSrcControlPoint(new Point(100, 0));
line2.setDestControlPoint(new Point(-100, 0));
overflowWorkspace.append(line2);
workspace.append(line2);
overflowWorkspace.addItAsChildTo($('#overflowExample').first());
workspace.addItAsChildTo($('#overflowExample').first());

3
packages/web2d/test/playground/events.js
View File

@ -1,7 +1,7 @@
/* eslint-disable no-alert */
import $ from 'jquery';
import {
Toolkit, Workspace, Elipse,
Workspace, Elipse,
} from '../../src';
global.$ = $;
@ -55,7 +55,6 @@ MultipleEventHandler.prototype.unRegisterOneListener = function unRegisterOneLis
}
};
Toolkit.init();
// Workspace with CoordOrigin(100,100);
const workspace = new Workspace();

14
packages/web2d/test/playground/font.js
View File

@ -25,14 +25,14 @@ function multiline(text, family, elemId) {
}
function alignments(text, family, elemId) {
const overflowWorkspace = new Workspace();
overflowWorkspace.setSize('260px', '240px');
overflowWorkspace.setCoordSize('260', '240');
overflowWorkspace.setCoordOrigin(0, 0);
const workspace = new Workspace();
workspace.setSize('260px', '240px');
workspace.setCoordSize('260', '240');
workspace.setCoordOrigin(0, 0);
['center', 'left', 'right'].forEach((align, i) => {
const wText = new Text();
overflowWorkspace.append(wText);
workspace.append(wText);
wText.setText(text);
wText.setFont(family, 8, 'bold');
@ -41,11 +41,9 @@ function alignments(text, family, elemId) {
wText.setTextAlignment(align);
});
overflowWorkspace.addItAsChildTo($(`#${elemId}`));
workspace.addItAsChildTo($(`#${elemId}`));
}
Toolkit.init();
// Multine tests ...
['Arial', 'Tahoma', 'Verdana', 'Times'].forEach((family, i) => {
multiline('This multine text.\nLine 1 :)\nLine2', family, `multi${i}`);

2
packages/web2d/test/playground/group.js
View File

@ -6,8 +6,6 @@ import {
global.$ = $;
Toolkit.init();
const basicTest = () => {
const workspace = new Workspace();
workspace.setSize('150px', '150px');

33
packages/web2d/test/playground/image.html Normal file
View File

@ -0,0 +1,33 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Image Tests </h1>
<table>
<tbody>
<tr>
<td>
Load URL Images in PNG and SVG
</td>
<td>
<div id="urlImage" />
</td>
</tr> <tr>
<td>
Load Inline PNG and SVG
</td>
<td>
<div id="inlineImage" />
</td>
</tr>
</tbody>
</table>
</body>
</html>

28
packages/web2d/test/playground/image.js Normal file
View File

@ -0,0 +1,28 @@
import $ from 'jquery';
import svgResource from './resources/logo-icon.svg';
import pngResource from './resources/logo-icon.png';
import {
Workspace, Image,
} from '../../src';
// URL Based image test ...
const workspace = new Workspace({ fillColor: 'light-gray' });
workspace.setSize('200px', '100px');
// Add SVG Image ...
const svgImage = new Image();
svgImage.setHref(svgResource);
svgImage.setSize(80, 120);
workspace.append(svgImage);
// Add PNG Image ...
const pngImage = new Image();
pngImage.setHref(pngResource);
pngImage.setSize(60, 120);
pngImage.setPosition(80, 0);
workspace.append(pngImage);
workspace.addItAsChildTo($('#urlImage').first());
// Embedded image test ...

2
packages/web2d/test/playground/index.html
View File

@ -24,6 +24,8 @@
<li><a href="/shapes.html">Shapes</a></li>
<li><a href="/text.html">Text</a></li>
<li><a href="/workspace.html">Workspace</a></li>
<li><a href="/image.html">Image</a></li>
</ul>
</div>
</body>

3
packages/web2d/test/playground/line.js
View File

@ -1,11 +1,10 @@
import $ from 'jquery';
import {
Toolkit, Workspace, Line, Rect,
Workspace, Line, Rect,
} from '../../src';
global.$ = $;
Toolkit.init();
const workspaceAttributes = {
width: '700px', height: '100px', coordSize: '350 50', fillColor: '#ffffcc',
};

3
packages/web2d/test/playground/polyLine.js
View File

@ -1,10 +1,9 @@
import $ from 'jquery';
import {
Toolkit, Workspace, PolyLine,
Workspace, PolyLine,
} from '../../src';
global.$ = $;
Toolkit.init();
let overflowWorkspace = new Workspace({ fillColor: 'green' });
overflowWorkspace.setSize('100px', '100px');

20
packages/web2d/test/playground/prototype.js vendored
View File

@ -1,7 +1,5 @@
import $ from 'jquery';
import {
Toolkit, Workspace, Rect, Group,
} from '../../src';
import * as src from '../../src';
global.$ = $;
@ -9,16 +7,14 @@ let xScale = 1000;
let yScale = 600;
let shapeOrigX = 0;
Toolkit.init();
const workspace = new Workspace();
const workspace = new src.Workspace();
workspace.setSize(`${xScale}px`, `${yScale}px`);
workspace.setCoordSize(xScale, yScale);
workspace.setCoordOrigin(0, 0);
workspace.setFill('#f0f0f0');
// Center Topic Rect ...
const centralRect = new Rect(0.3);
const centralRect = new src.Rect(0.3);
centralRect.setSize(200, 60);
centralRect.setPosition(300, 300);
centralRect.setFill('#99ccff');
@ -41,13 +37,13 @@ global.zoomOut = function zoomOut() {
global.createShape = function createShape() {
// Secondary Idea...
const nodeGroup = new Group();
const nodeGroup = new src.Group();
nodeGroup.setSize(200, 60);
nodeGroup.setCoordSize(200, 60);
nodeGroup.setPosition(700, shapeOrigX);
shapeOrigX += 50;
const outerRect = new Rect();
const outerRect = new src.Rect();
outerRect.setSize(200, 100);
outerRect.setVisibility(false);
outerRect.setPosition(0, 0);
@ -55,7 +51,7 @@ global.createShape = function createShape() {
outerRect.setStroke(1, 'solid', '#878b8f');
nodeGroup.append(outerRect);
const inerRect = new Rect(0.3);
const inerRect = new src.Rect(0.3);
inerRect.setSize(190, 85);
inerRect.setPosition(5, 10);
inerRect.setFill('white');
@ -76,14 +72,14 @@ global.createShape = function createShape() {
});
nodeGroup.addEvent('mousedown', function addEvent(e) {
const shadowGroup = new Group();
const shadowGroup = new src.Group();
shadowGroup.setSize(200, 60);
shadowGroup.setCoordSize(200, 60);
const position = nodeGroup.getPosition();
shadowGroup.setPosition(position.x, position.y);
const shadowRect = new Rect(0.3);
const shadowRect = new src.Rect(0.3);
shadowRect.setSize(190, 85);
shadowRect.setPosition(5, 10);
shadowRect.setFill('white', 0.3);

3
packages/web2d/test/playground/rect.js
View File

@ -1,11 +1,10 @@
import $ from 'jquery';
import {
Toolkit, Workspace, Rect,
Workspace, Rect,
} from '../../src';
global.$ = $;
Toolkit.init();
const rectExampleTest = () => {
const workspace = new Workspace();

BIN
packages/web2d/test/playground/resources/logo-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

15
packages/web2d/test/playground/resources/logo-icon.svg Normal file
View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="11.791 4.244 45.584 42.529" width="47.08" height="32.567" xmlns="http://www.w3.org/2000/svg">
<mask id="i08j30ef6a" fill="#fff">
<path d="M 32.334 17.911 C 32.334 20.705 31.301 23.382 29.458 25.357 C 27.617 27.332 25.121 28.441 22.517 28.441 C 19.913 28.441 17.417 27.332 15.576 25.357 C 13.734 23.382 12.7 20.705 12.7 17.911 L 32.334 17.911 Z"/>
</mask>
<mask id="1f1ltfoetb" fill="#fff">
<path d="M 56.588 17.911 C 56.588 20.705 55.554 23.382 53.712 25.357 C 51.872 27.332 49.375 28.441 46.771 28.441 C 44.167 28.441 41.67 27.332 39.83 25.357 C 37.988 23.382 36.954 20.705 36.954 17.911 L 56.588 17.911 Z"/>
</mask>
<path fill="#FFCB00" stroke="#000" stroke-linejoin="round" stroke-width="1.5" d="M 34.644 41.603 C 32.912 36.337 30.603 36.996 24.25 32.388 L 44.462 32.388 C 38.933 36.505 35.8 36.337 34.644 41.603 Z" style=""/>
<path fill="#FFCB00" stroke="#000" stroke-width="1.5" d="M 50.051 23.119 C 50.051 26.338 48.377 29.364 45.467 31.627 C 42.563 33.888 38.503 35.318 33.975 35.318 C 29.446 35.318 25.385 33.888 22.482 31.627 C 19.572 29.364 17.896 26.338 17.896 23.119 C 17.896 19.898 19.572 16.874 22.482 14.61 C 25.385 12.349 29.445 10.918 33.972 10.918 C 38.503 10.918 42.563 12.349 45.467 14.61 C 48.375 16.874 50.053 19.898 50.053 23.119 Z" style=""/>
<path fill="#B3D4FF" stroke="#000" stroke-width="3" d="M 32.334 17.911 C 32.334 20.705 31.3 23.382 29.459 25.357 C 27.618 27.332 25.12 28.441 22.517 28.441 C 19.914 28.441 17.418 27.332 15.576 25.357 C 13.734 23.382 12.7 20.705 12.7 17.911 L 32.334 17.911 Z" mask="url(#i08j30ef6a)" style=""/>
<path fill="#B3D4FF" stroke="#000" stroke-width="3" d="M 56.588 17.911 C 56.588 20.705 55.554 23.382 53.712 25.357 C 51.872 27.332 49.375 28.441 46.772 28.441 C 44.168 28.441 41.671 27.332 39.831 25.357 C 37.989 23.382 36.954 20.705 36.954 17.911 L 56.588 17.911 Z" mask="url(#1f1ltfoetb)" style=""/>
<path stroke="#000" stroke-width="1.5" d="M 31.179 19.393 C 33.489 17.417 35.8 17.417 38.109 19.393" style=""/>
<path fill="#FFCB00" d="M 34.859 39.957 C 33.128 34.692 23.095 32.388 24.827 31.073 C 26.559 29.757 43.307 29.1 44.462 30.415 C 45.618 31.731 36.541 34.134 34.859 39.957 Z" style=""/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

4
packages/web2d/test/playground/shapes.js
View File

@ -1,12 +1,10 @@
import $ from 'jquery';
import {
Toolkit, Workspace, Rect,
Workspace, Rect,
} from '../../src';
global.$ = $;
Toolkit.init();
const strokeStyleTest = () => {
function builder(parent, scale, strokeWidth) {
const rectSize = scale * 80;

3
packages/web2d/test/playground/text.js
View File

@ -1,6 +1,6 @@
import $ from 'jquery';
import {
Toolkit, Workspace, Text,
Workspace, Text,
} from '../../src';
import TransformUtils from '../../src/components/peer/utils/TransformUtils';
@ -44,7 +44,6 @@ const textTestHelper = function textTestHelper(coordSize, textval, font, fontSiz
workspaces[iesimo] = workspace;
};
Toolkit.init();
textTestHelper(200, 'Test Text 1', 'Arial', 10, 'normal', 'normal', 'red', 'text0', 0);
textTestHelper(100, 'Test Text 2', 'Arial', 10, 'normal', 'normal', 'blue', 'text1', 1);
textTestHelper(50, 'Test Text 3', 'Arial', 10, 'normal', 'normal', 'blue', 'text2', 2);

4
packages/web2d/test/playground/workspace.js
View File

@ -1,13 +1,11 @@
import $ from 'jquery';
import {
Toolkit, Workspace, Elipse,
Workspace, Elipse,
} from '../../src';
import Grid from './Grid';
global.$ = $;
Toolkit.init();
const overflowWorkspace = new Workspace();
overflowWorkspace.setSize('100px', '100px');
const elipse1 = new Elipse();

12
packages/web2d/webpack.playground.js
View File

@ -17,6 +17,7 @@ module.exports = {
group: './test/playground/group.js',
prototype: './test/playground/prototype.js',
text: './test/playground/text.js',
image: './test/playground/image.js',
},
output: {
path: path.resolve(__dirname, 'dist', 'tests'),
@ -39,6 +40,10 @@ module.exports = {
/node_modules/,
],
},
{
test: /\.(png|svg)$/i,
type: 'asset/inline',
},
],
},
resolve: {
@ -145,5 +150,12 @@ module.exports = {
template: 'test/playground/text.html',
},
),
new HtmlWebpackPlugin(
{
chunks: ['image'],
filename: 'image.html',
template: 'test/playground/image.html',
},
),
],
};