mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-22 06:37:56 +01:00
Improve tests.
This commit is contained in:
Paulo Gustavo Veiga
parent
6ba917cf32
commit
ef64af2141
@ -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>
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -3,14 +3,9 @@
|
||||
<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>Lines Render Tests </h1>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
25
packages/web2d/test/playground/styles.css
Normal file
25
packages/web2d/test/playground/styles.css
Normal 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;
|
||||
}
|
||||
@ -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,15 +22,15 @@
|
||||
<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);">
|
||||
<input type="button" value="Zoom In" onclick="zoomIn()">
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
53
packages/web2d/test/playground/text.js
Normal file
53
packages/web2d/test/playground/text.js
Normal 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);
|
||||
@ -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>
|
||||
|
||||
@ -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',
|
||||
},
|
||||
),
|
||||
],
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user