vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-11-22 14:47:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

Improve tests.

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2021-12-12 14:28:32 -08:00
parent 6ba917cf32
commit ef64af2141
15 changed files with 141 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/web2d/test/playground/arrow.html
View File

@ -3,21 +3,14 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<style> <link rel="stylesheet" href="styles.css">
th,
td {
border: 1px solid black;
}
</style>
</head> </head>
<body> <body>
<h1>PolyLines Render Tests </h1> <h1>PolyLines Render Tests </h1>
<table> <table>
<colgroup style="width:80%;"> <tbody>
<col style="width:30%" />
<col style="width:60%" />
</colgroup>
<tr> <tr>
<td> <td>
Different types of PolyLines that can be used. Different types of PolyLines that can be used.
@ -27,7 +20,8 @@
</td> </td>
</tr> </tr>
</table> </tbody>
</table>
</body> </body>
</html> </html>

30
packages/web2d/test/playground/curvedLine.html
View File

@ -3,12 +3,7 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<style> <link rel="stylesheet" href="styles.css">
th,
td {
border: 1px solid black;
}
</style>
</head> </head>
<body> <body>
@ -16,19 +11,16 @@
<h1>PolyLines Render Tests </h1> <h1>PolyLines Render Tests </h1>
<table> <table>
<colgroup style="width:80%;"> <tbody>
<col style="width:30%" /> <tr>
<col style="width:60%" /> <td>
</colgroup> Different types of PolyLines that can be used.
<tr> </td>
<td> <td>
Different types of PolyLines that can be used. <div id="overflowExample" />
</td> </td>
<td> </tr>
<div id="overflowExample" /> </tbody>
</td>
</tr>
</table> </table>
</body> </body>

15
packages/web2d/test/playground/events.html
View File

@ -2,26 +2,13 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<style> <link rel="stylesheet" href="styles.css">
th,
td {
border: 1px solid black;
}
.eventForm {
float: left;
margin: 10px;
}
</style>
</head> </head>
<body> <body>
<h1>Elements Event Handling</h1> <h1>Elements Event Handling</h1>
<table> <table>
<colgroup style="width:80%;">
<col style="width:30%" />
<col style="width:60%" />
</colgroup>
<tbody> <tbody>
<tr> <tr>
<td> <td>

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

@ -1,20 +1,11 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!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"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<style> <link rel="stylesheet" href="styles.css">
th,
td {
border: 1px solid black;
}
</style>
</head> </head>
<body> <body>
<h1>Web2d Fonts Tests</h1> <h1>Web2d Fonts Tests</h1>
<table> <table>
<colgroup>
<col style="width:30%" />
<col style="width:60%" />
</colgroup>
<thead> <thead>
<tr> <tr>
<td></td> <td></td>
@ -24,6 +15,7 @@
<td>Times</td> <td>Times</td>
</tr> </tr>
</thead> </thead>
<tbody>
<tr> <tr>
<td> <td>
Multiline Text Multiline Text
@ -59,7 +51,7 @@
</td> </td>
</tr> </tr>
<!--**************************************************************************--> <!--**************************************************************************-->
</tbody>
</table> </table>
<input type="button" value="Zoom In" onclick="zoomIn()"> <input type="button" value="Zoom In" onclick="zoomIn()">
</body> </body>

16
packages/web2d/test/playground/group.html
View File

@ -3,22 +3,13 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<style> <link rel="stylesheet" href="styles.css">
th,
td {
border: 1px solid black;
}
</style>
</head> </head>
<body> <body>
<h1>Group Render Tests</h1> <h1>Group Render Tests</h1>
<table> <table>
<colgroup style="width:80%;"> <tbody>
<col style="width:50%" />
<col style="width:50%" />
</colgroup>
<tr> <tr>
<td> <td>
A group object can be used to collect shapes. In this example, A group object can be used to collect shapes. In this example,
@ -69,7 +60,6 @@
<td> <td>
<div id="groupNestedContainer" /> <div id="groupNestedContainer" />
</td> </td>
</tr> </tr>
@ -156,7 +146,7 @@
<div id="scaleStrokeExample" style="float:left;margin:20px;"></div> <div id="scaleStrokeExample" style="float:left;margin:20px;"></div>
</td> </td>
</tr> </tr>
</tbody>
</table> </table>
</body> </body>

7
packages/web2d/test/playground/line.html
View File

@ -3,12 +3,7 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<style> <link rel="stylesheet" href="styles.css">
th,
td {
border: 1px solid black;
}
</style>
</head> </head>
<body> <body>

14
packages/web2d/test/playground/polyLine.html
View File

@ -3,22 +3,15 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<style> <link rel="stylesheet" href="styles.css">
th,
td {
border: 1px solid black;
}
</style>
</head> </head>
<body> <body>
<h1>PolyLines Render Tests </h1> <h1>PolyLines Render Tests </h1>
<table> <table>
<colgroup style="width:80%;"> <tbody>
<col style="width:30%" />
<col style="width:60%" />
</colgroup>
<tr> <tr>
<td> <td>
Different types of PolyLines that can be used. Different types of PolyLines that can be used.
@ -37,6 +30,7 @@
</td> </td>
</tr> </tr>
</tbody>
</table> </table>
</body> </body>

8
packages/web2d/test/playground/prototype.html
View File

@ -1,13 +1,9 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!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"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<style> <link rel="stylesheet" href="styles.css">
th,
td {
border: 1px solid black;
}
</style>
</head> </head>
<body> <body>

15
packages/web2d/test/playground/rect.html
View File

@ -3,12 +3,7 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<style> <link rel="stylesheet" href="styles.css">
th,
td {
border: 1px solid black;
}
</style>
</head> </head>
<body> <body>
@ -17,10 +12,7 @@
<h1>Rect Render Tests </h1> <h1>Rect Render Tests </h1>
<table> <table>
<colgroup style="width:80%;"> <tbody>
<col style="width:10%" />
<col style="width:90%" />
</colgroup>
<tr> <tr>
<td> <td>
Straight Lines. Straight Lines.
@ -41,8 +33,7 @@
</td> </td>
</tr> </tr>
</tbody>
</table> </table>
</body> </body>

14
packages/web2d/test/playground/shapes.html
View File

@ -3,12 +3,7 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<style> <link rel="stylesheet" href="styles.css">
th,
td {
border: 1px solid black;
}
</style>
</head> </head>
<body> <body>
@ -16,10 +11,7 @@
<h1>Element properties Tests </h1> <h1>Element properties Tests </h1>
<table> <table>
<colgroup style="width:80%;"> <tbody>
<col style="width:10%" />
<col style="width:90%" />
</colgroup>
<tr> <tr>
<td> <td>
Stroke Styles. Stroke Styles.
@ -81,7 +73,7 @@
</td> </td>
</tr> </tr>
</tbody>
</table> </table>
</body> </body>

25
packages/web2d/test/playground/styles.css Normal file
View File

@ -0,0 +1,25 @@
html *
{
font-size: 1em !important;
color: #000 !important;
font-family: Arial !important;
}
table {
border: 1px solid darkgray;
border-spacing: 0px;
}
td {
border: 1px solid darkgray;
padding: 10px;
}
tbody tr td:first-child {
width: 20%;
}
.eventForm {
float: left;
margin: 10px;
}

87
packages/web2d/test/playground/text.html
View File

@ -1,91 +1,14 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!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"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<style> <link rel="stylesheet" href="styles.css">
th,
td {
border: 1px solid black;
}
</style>
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {}
};
web2d.peer.utils = {};
</script>
<script type="text/javascript">
function zoomIn() {
for (i = 0; i < workspaces.length; i++) {
var coordSize = workspaces[i].getCoordSize();
workspaces[i].setCoordSize(coordSize.width * 2, coordSize.height * 2);
}
}
workspaces = [];
var TextTest = function (size, coordSize, textval, font, fontSizeval, style, modifier, fontColor, owner, iesimo) {
var overflowWorkspace = new web2d.Workspace();
overflowWorkspace.setSize(size, size);
overflowWorkspace.setCoordSize(coordSize, coordSize);
overflowWorkspace.setCoordOrigin(0, 0);
var text = new web2d.Text();
overflowWorkspace.append(text);
var scale = web2d.TransformUtils.workoutScale(text.peer);
text.setText(textval + " " + scale.height);
text.setFont(font, fontSizeval, style, modifier);
text.setPosition(0, 0);
text.setColor(fontColor);
textot = text;
overflowWorkspace.addItAsChildTo(document.getElementById(owner));
var parent = document.getElementById(owner);
var span = document.createElement("span");
span.setAttribute("id", "textoHTML" + iesimo);
var textsize = text.offsetWidth;
var textHtml = document.createTextNode(textsize);
var fontSize = text.getHtmlFontSize();
span.append(textHtml);
//var fontSize=20*scale.height*2;
span.setAttribute("style", "font-weight:" + modifier + ";font-style: " + style + "; font-size:" + fontSize + "pt; font-family: " + font + ";width:30;height:30;");
parent.append(span);
workspaces[iesimo] = overflowWorkspace;
};
function initialize() {
web2d.Toolkit.init();
TextTest("100px", 200, "Test Text", "Arial", 10, "normal", "normal", "red", "text0", 0);
TextTest("100px", 100, "Test Text", "Arial", 10, "normal", "normal", "blue", "text1", 1);
TextTest("100px", 50, "Test Text", "Arial", 10, "normal", "normal", "blue", "text2", 2);
TextTest("100px", 100, "Test Text", "Arial", 10, "italic", "normal", "blue", "text3", 3);
TextTest("100px", 100, "Test Text", "Arial", 10, "italic", "bold", "green", "text4", 4);
TextTest("100px", 100, "Test Text\nMultiline", "Arial", 10, "italic", "bold", "green", "text5", 5);
}
</script>
</head> </head>
<body onload="initialize();"> <body>
<h1>Text Render Tests </h1> <h1>Text Render Tests </h1>
<table> <table>
<colgroup style="width:80%;"> </tbody>
<col style="width:30%" />
<col style="width:60%" />
</colgroup>
<tr> <tr>
<td> <td>
Simple text Simple text
@ -99,11 +22,11 @@
<div id="text5"></div> <div id="text5"></div>
</td> </td>
</tr> </tr>
<!--**************************************************************************--> <!--**************************************************************************-->
</tbody>
</table> </table>
<span>Text to Inspect: </span><input type="text" id="iesimo"> <span>Text to Inspect: </span><input type="text" id="iesimo">
<input type="button" value="Inspect" <input type="button" value="Inspect"
onclick="alert(document.getElementById('textoHTML'+document.id('iesimo').value).offsetWidth);"> onclick="alert(document.getElementById('textoHTML'+document.id('iesimo').value).offsetWidth);">

53
packages/web2d/test/playground/text.js Normal file
View File

@ -0,0 +1,53 @@
import $ from 'jquery';
import {
Toolkit, Workspace, Text,
} from '../../src';
import TransformUtils from '../../src/components/peer/utils/TransformUtils';
const workspaces = [];
global.$ = $;
global.zoomIn = function zoomIn() {
for (let i = 0; i < workspaces.length; i++) {
const coordSize = workspaces[i].getCoordSize();
workspaces[i].setCoordSize(coordSize.width * 2, coordSize.height * 2);
}
};
const textTestHelper = function textTestHelper(coordSize, textval, font, fontSizeval, style, modifier, fontColor, htmlElemId, iesimo) {
const workspace = new Workspace();
workspace.setSize('300px', '100px');
workspace.setCoordSize('coordSize', coordSize);
workspace.setCoordOrigin(0, 0);
workspace.addItAsChildTo($(`#${htmlElemId}`));
const text = new Text();
const scale = TransformUtils.workoutScale(text.peer);
text.setText(`${textval} - Scale: ${scale.height}`);
text.setFont(font, fontSizeval, style, modifier);
text.setPosition(0, 0);
text.setColor(fontColor);
workspace.append(text);
const parent = document.getElementById(htmlElemId);
const span = document.createElement('span');
span.setAttribute('id', `textoHTML${iesimo}`);
const textsize = `${textval} - Scale: ${scale.height}`;
const textHtml = document.createTextNode(textsize);
const fontSize = text.getHtmlFontSize();
span.append(textHtml);
span.setAttribute('style', `font-weight:${modifier};font-style: ${style}; font-size:${fontSize}pt; font-family: ${font};width:30;height:30;`);
parent.append(span);
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);
textTestHelper(100, 'Test Text 4', 'Arial', 10, 'italic', 'normal', 'blue', 'text3', 3);
textTestHelper(100, 'Test Text 5', 'Arial', 10, 'italic', 'bold', 'green', 'text4', 4);
textTestHelper(100, 'Test Text 6 \nMultiline', 'Arial', 10, 'italic', 'bold', 'green', 'text5', 5);

16
packages/web2d/test/playground/workspace.html
View File

@ -3,23 +3,14 @@
<html> <html>
<head> <head>
<style> <link rel="stylesheet" href="styles.css">
th,
td {
border: 1px solid black;
}
</style>
</head> </head>
<body> <body>
<h1>Workspace Render Tests </h1> <h1>Workspace Render Tests </h1>
<table> <table>
<colgroup style="width:80%;"> <tbody>
<col style="width:30%">
<col style="width:60%">
</colgroup>
<tr> <tr>
<td> <td>
The Workspace's size defines the visible work area. If an element is outside the workspace, it must not The Workspace's size defines the visible work area. If an element is outside the workspace, it must not
@ -126,8 +117,9 @@
</div> </div>
</td> </td>
</tr> </tr>
</tbody>
</table> </table>
</body> </body>
</html> </html>

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

@ -1,6 +1,7 @@
const path = require('path'); const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
module.exports = { module.exports = {
entry: { entry: {
@ -15,6 +16,7 @@ module.exports = {
shapes: './test/playground/shapes.js', shapes: './test/playground/shapes.js',
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',
}, },
output: { output: {
path: path.resolve(__dirname, 'dist', 'tests'), path: path.resolve(__dirname, 'dist', 'tests'),
@ -47,8 +49,14 @@ module.exports = {
}, },
plugins: [ plugins: [
new CleanWebpackPlugin(), new CleanWebpackPlugin(),
new CopyPlugin({
patterns: [
{ from: 'test/playground/styles.css', to: 'styles.css' },
],
}),
new HtmlWebpackPlugin( new HtmlWebpackPlugin(
{ {
chunks: ['index'],
filename: 'index.html', filename: 'index.html',
template: 'test/playground/index.html', template: 'test/playground/index.html',
}, },
@ -130,5 +138,12 @@ module.exports = {
template: 'test/playground/prototype.html', template: 'test/playground/prototype.html',
}, },
), ),
new HtmlWebpackPlugin(
{
chunks: ['text'],
filename: 'text.html',
template: 'test/playground/text.html',
},
),
], ],
}; };