diff --git a/packages/mindplot/src/components/ImageIcon.js b/packages/mindplot/src/components/ImageIcon.js index 0de0c5ae..fa73ccc8 100644 --- a/packages/mindplot/src/components/ImageIcon.js +++ b/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`]; diff --git a/packages/mindplot/src/components/Workspace.js b/packages/mindplot/src/components/Workspace.js index 8ab2b716..d4490dcf 100644 --- a/packages/mindplot/src/components/Workspace.js +++ b/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); } diff --git a/packages/mindplot/src/components/export/SVGExporter.ts b/packages/mindplot/src/components/export/SVGExporter.ts index d67da42e..c3daf1ae 100644 --- a/packages/mindplot/src/components/export/SVGExporter.ts +++ b/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 ""; diff --git a/packages/mindplot/src/components/widget/IconPanel.js b/packages/mindplot/src/components/widget/IconPanel.js index 98e832ba..73f9dc01 100644 --- a/packages/mindplot/src/components/widget/IconPanel.js +++ b/packages/mindplot/src/components/widget/IconPanel.js @@ -43,7 +43,7 @@ class IconPanel extends ToolbarPaneItem { const iconId = familyIcons[j]; const img = $('') .attr('id', iconId) - .attr('src', ImageIcon._getImageUrl(iconId)) + .attr('src', ImageIcon.getImageUrl(iconId)) .attr('class', 'panelIcon'); familyContent.append(img); diff --git a/packages/mindplot/test/unit/export/SVGExporterTestSuite.test.ts b/packages/mindplot/test/unit/export/SVGExporterTestSuite.test.ts index 8db9d781..c2937b04 100644 --- a/packages/mindplot/test/unit/export/SVGExporterTestSuite.test.ts +++ b/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; + } }); diff --git a/packages/mindplot/test/unit/export/samples/welcome.svg b/packages/mindplot/test/unit/export/samples/welcome.svg index 95409e1c..46e95f1d 100644 --- a/packages/mindplot/test/unit/export/samples/welcome.svg +++ b/packages/mindplot/test/unit/export/samples/welcome.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/mindplot/webpack.common.js b/packages/mindplot/webpack.common.js index 188df7a0..f654a0b1 100644 --- a/packages/mindplot/webpack.common.js +++ b/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', }, ], }, diff --git a/packages/web2d/src/index.js b/packages/web2d/src/index.js index a0bf3975..73aada6b 100644 --- a/packages/web2d/src/index.js +++ b/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, }; diff --git a/packages/web2d/test/playground/arrow.js b/packages/web2d/test/playground/arrow.js index 8d8aadcc..a1eb9e29 100644 --- a/packages/web2d/test/playground/arrow.js +++ b/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()); diff --git a/packages/web2d/test/playground/curvedLine.js b/packages/web2d/test/playground/curvedLine.js index 265a84c6..8ffd34bd 100644 --- a/packages/web2d/test/playground/curvedLine.js +++ b/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()); \ No newline at end of file +workspace.addItAsChildTo($('#overflowExample').first()); \ No newline at end of file diff --git a/packages/web2d/test/playground/events.js b/packages/web2d/test/playground/events.js index c338b49b..f272a5a1 100644 --- a/packages/web2d/test/playground/events.js +++ b/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(); diff --git a/packages/web2d/test/playground/font.js b/packages/web2d/test/playground/font.js index 041105b1..442acb00 100644 --- a/packages/web2d/test/playground/font.js +++ b/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}`); diff --git a/packages/web2d/test/playground/group.js b/packages/web2d/test/playground/group.js index 7440dd64..5c57d09c 100644 --- a/packages/web2d/test/playground/group.js +++ b/packages/web2d/test/playground/group.js @@ -6,8 +6,6 @@ import { global.$ = $; -Toolkit.init(); - const basicTest = () => { const workspace = new Workspace(); workspace.setSize('150px', '150px'); diff --git a/packages/web2d/test/playground/image.html b/packages/web2d/test/playground/image.html new file mode 100644 index 00000000..150360b3 --- /dev/null +++ b/packages/web2d/test/playground/image.html @@ -0,0 +1,33 @@ + + + + + + + + + +

Image Tests

+ + + + + + + + + + + +
+ Load URL Images in PNG and SVG + +
+
+ Load Inline PNG and SVG + +
+
+ + + \ No newline at end of file diff --git a/packages/web2d/test/playground/image.js b/packages/web2d/test/playground/image.js new file mode 100644 index 00000000..235a6499 --- /dev/null +++ b/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 ... diff --git a/packages/web2d/test/playground/index.html b/packages/web2d/test/playground/index.html index 161e95c8..f9207e23 100644 --- a/packages/web2d/test/playground/index.html +++ b/packages/web2d/test/playground/index.html @@ -24,6 +24,8 @@
  • Shapes
  • Text
  • Workspace
    • +
  • Image
    • + diff --git a/packages/web2d/test/playground/line.js b/packages/web2d/test/playground/line.js index 60cebd4e..7a144863 100644 --- a/packages/web2d/test/playground/line.js +++ b/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', }; diff --git a/packages/web2d/test/playground/polyLine.js b/packages/web2d/test/playground/polyLine.js index 7df1eabe..9773ce7b 100644 --- a/packages/web2d/test/playground/polyLine.js +++ b/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'); diff --git a/packages/web2d/test/playground/prototype.js b/packages/web2d/test/playground/prototype.js index a9396a10..dd5ab886 100644 --- a/packages/web2d/test/playground/prototype.js +++ b/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); diff --git a/packages/web2d/test/playground/rect.js b/packages/web2d/test/playground/rect.js index 22d5681b..1d6691b0 100644 --- a/packages/web2d/test/playground/rect.js +++ b/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(); diff --git a/packages/web2d/test/playground/resources/logo-icon.png b/packages/web2d/test/playground/resources/logo-icon.png new file mode 100644 index 00000000..bb62808d Binary files /dev/null and b/packages/web2d/test/playground/resources/logo-icon.png differ diff --git a/packages/web2d/test/playground/resources/logo-icon.svg b/packages/web2d/test/playground/resources/logo-icon.svg new file mode 100644 index 00000000..11f96dd4 --- /dev/null +++ b/packages/web2d/test/playground/resources/logo-icon.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/web2d/test/playground/shapes.js b/packages/web2d/test/playground/shapes.js index 9bb4684a..5b086e3c 100644 --- a/packages/web2d/test/playground/shapes.js +++ b/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; diff --git a/packages/web2d/test/playground/text.js b/packages/web2d/test/playground/text.js index 4cce4a7d..4f249b2f 100644 --- a/packages/web2d/test/playground/text.js +++ b/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); diff --git a/packages/web2d/test/playground/workspace.js b/packages/web2d/test/playground/workspace.js index 719aa53d..1b82b8fa 100644 --- a/packages/web2d/test/playground/workspace.js +++ b/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(); diff --git a/packages/web2d/webpack.playground.js b/packages/web2d/webpack.playground.js index d51f75a1..b309a20e 100644 --- a/packages/web2d/webpack.playground.js +++ b/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', + }, + ), ], };