Improve tests.

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

View File

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

View File

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

View File

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

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

View File

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

View File

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

View File

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

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

View File

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

View File

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

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

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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
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>
<link rel="stylesheet" href="styles.css">
</head>
<body onload="initialize();">
<body>
<h1>Text Render Tests </h1>
<table>
<colgroup style="width:80%;">
<col style="width:30%" />
<col style="width:60%" />
</colgroup>
</tbody>
<tr>
<td>
Simple text
@ -99,11 +22,11 @@
<div id="text5"></div>
</td>
</tr>
<!--**************************************************************************-->
</tbody>
</table>
<span>Text to Inspect: </span><input type="text" id="iesimo">
<input type="button" value="Inspect"
onclick="alert(document.getElementById('textoHTML'+document.id('iesimo').value).offsetWidth);">

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

View File

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

View File

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