Move images to inline.

Remove toolkit init
This commit is contained in:
Paulo Gustavo Veiga 2021-12-30 12:32:32 -08:00
parent 717f4e023b
commit 959a732999
26 changed files with 155 additions and 77 deletions

View File

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

View File

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

View File

@ -1,5 +1,6 @@
import { Mindmap } from "../.."; import { Mindmap } from "../..";
import ImageIcon from "../ImageIcon";
import Exporter from "./Exporter"; import Exporter from "./Exporter";
class SVGExporter implements Exporter { class SVGExporter implements Exporter {
@ -10,11 +11,13 @@ class SVGExporter implements Exporter {
export(): string { export(): string {
// Replace all images for in-line images ... // Replace all images for in-line images ...
const imagesElements:HTMLCollection = this.svgElement.children const imagesElements: HTMLCollection = this.svgElement.getElementsByTagName('image');
console.log(imagesElements.length); 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 ""; return "";

View File

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

View File

@ -5,22 +5,31 @@ import XMLSerializerFactory from '../../../src/components/persistence/XMLSeriali
import SVGExporter from '../../../src/components/export/SVGExporter'; import SVGExporter from '../../../src/components/export/SVGExporter';
test('mindplot generation of simple maps', () => { test('mindplot generation of simple maps', () => {
const parser = new DOMParser(); // Load mindmap DOM ...
const mindmapPath = path.resolve(__dirname, './samples/welcome.xml');
// Load DOM ... const mapDocument = parseXMLFile(mindmapPath, 'text/xml');
const mapStream = fs.readFileSync(path.resolve(__dirname, './samples/welcome.xml'), { encoding: 'utf-8' });
const mapDocument = parser.parseFromString(mapStream.toString(), 'text/xml')
// Convert to mindmap ... // Convert to mindmap ...
const serializer = XMLSerializerFactory.getSerializerFromDocument(mapDocument); const serializer = XMLSerializerFactory.getSerializerFromDocument(mapDocument);
const mindmap: Mindmap = serializer.loadFromDom(mapDocument, 'welcome'); const mindmap: Mindmap = serializer.loadFromDom(mapDocument, 'welcome');
// Load SVG ... // Load SVG ...
const svgStream = fs.readFileSync(path.resolve(__dirname, './samples/welcome.svg'), { encoding: 'utf-8' }); const svgPath = path.resolve(__dirname, './samples/welcome.svg');
const svgDocument = parser.parseFromString(svgStream.toString(), 'application/xml') const svgDocument = parseXMLFile(svgPath, 'image/svg+xml');
console.log(svgDocument);
// Inspect ... // Inspect ...
const exporter = new SVGExporter(mindmap, svgDocument.documentElement); const exporter = new SVGExporter(mindmap, svgDocument.documentElement);
console.log(exporter.export()); 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;
}
}); });

View File

@ -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 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 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,190 -271,190"></path>

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 40 KiB

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

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>

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

View File

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

View File

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

View File

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

View File

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

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

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>

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

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

View File

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

View File

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

View File

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