Move images to inline.

Remove toolkit init

packages/mindplot/src/components/ImageIcon.js

@@ -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`];

packages/mindplot/src/components/Workspace.js

@@ -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);
   }
 

packages/mindplot/src/components/export/SVGExporter.ts

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

packages/mindplot/src/components/widget/IconPanel.js

@@ -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);

packages/mindplot/test/unit/export/SVGExporterTestSuite.test.ts

@@ -5,22 +5,31 @@ import XMLSerializerFactory from '../../../src/components/persistence/XMLSeriali
 import SVGExporter from '../../../src/components/export/SVGExporter';
 
 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 mapDocument = parser.parseFromString(mapStream.toString(), 'text/xml')
+  // 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 svgStream = fs.readFileSync(path.resolve(__dirname, './samples/welcome.svg'), { encoding: 'utf-8' });
-  const svgDocument = parser.parseFromString(svgStream.toString(), 'application/xml')
-  console.log(svgDocument);
+  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;
+  }
 });

packages/mindplot/test/unit/export/samples/welcome.svg

@@ -1,4 +1,4 @@
-<svg focusable="true" preserveAspectRatio="none" width="1440" height="900" viewBox="-607.7499999999999 -318.32500000000005 1224 765">
+<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>

packages/mindplot/webpack.common.js

@@ -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',
       },
     ],
   },

packages/web2d/src/index.js

@@ -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,
 };

packages/web2d/test/playground/arrow.js

@@ -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());

packages/web2d/test/playground/curvedLine.js

@@ -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());

packages/web2d/test/playground/events.js

@@ -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();

packages/web2d/test/playground/font.js

@@ -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}`);

packages/web2d/test/playground/group.js

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

packages/web2d/test/playground/image.html

@@ -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>

packages/web2d/test/playground/image.js

@@ -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 ...

packages/web2d/test/playground/index.html

@@ -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>

packages/web2d/test/playground/line.js

@@ -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',
 };

packages/web2d/test/playground/polyLine.js

@@ -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');

packages/web2d/test/playground/prototype.js

@@ -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);

packages/web2d/test/playground/rect.js

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

packages/web2d/test/playground/resources/logo-icon.svg

@@ -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>

packages/web2d/test/playground/shapes.js

@@ -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;

packages/web2d/test/playground/text.js

@@ -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);

packages/web2d/test/playground/workspace.js

@@ -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();

packages/web2d/webpack.playground.js

@@ -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',
+      },
+    ),
   ],
 };