diff --git a/packages/web2d/test/playground/arrow.html b/packages/web2d/test/playground/arrow.html index 2c5c41ab..7af0d595 100644 --- a/packages/web2d/test/playground/arrow.html +++ b/packages/web2d/test/playground/arrow.html @@ -3,21 +3,14 @@ - +

PolyLines Render Tests

+ - - - - + -
Different types of PolyLines that can be used. @@ -27,7 +20,8 @@
+ + \ No newline at end of file diff --git a/packages/web2d/test/playground/curvedLine.html b/packages/web2d/test/playground/curvedLine.html index e4f42df6..fb142ece 100644 --- a/packages/web2d/test/playground/curvedLine.html +++ b/packages/web2d/test/playground/curvedLine.html @@ -3,12 +3,7 @@ - + @@ -16,19 +11,16 @@

PolyLines Render Tests

- - - - - - - - - + + + + + +
- Different types of PolyLines that can be used. - -
-
+ Different types of PolyLines that can be used. + +
+
diff --git a/packages/web2d/test/playground/events.html b/packages/web2d/test/playground/events.html index 0f2a5839..86ba3734 100755 --- a/packages/web2d/test/playground/events.html +++ b/packages/web2d/test/playground/events.html @@ -2,26 +2,13 @@ - +

Elements Event Handling

- - - -
diff --git a/packages/web2d/test/playground/font.html b/packages/web2d/test/playground/font.html index e28bded7..754086c2 100644 --- a/packages/web2d/test/playground/font.html +++ b/packages/web2d/test/playground/font.html @@ -1,20 +1,11 @@ - +

Web2d Fonts Tests

- - - - @@ -24,6 +15,7 @@ + - +
Times
Multiline Text @@ -59,7 +51,7 @@
diff --git a/packages/web2d/test/playground/group.html b/packages/web2d/test/playground/group.html index 93a12cbb..ab8a61a0 100755 --- a/packages/web2d/test/playground/group.html +++ b/packages/web2d/test/playground/group.html @@ -3,22 +3,13 @@ - - +

Group Render Tests

- - - - + - @@ -156,7 +146,7 @@
- +
A group object can be used to collect shapes. In this example, @@ -69,7 +60,6 @@
diff --git a/packages/web2d/test/playground/line.html b/packages/web2d/test/playground/line.html index ad13c099..85c45be6 100755 --- a/packages/web2d/test/playground/line.html +++ b/packages/web2d/test/playground/line.html @@ -3,14 +3,9 @@ - + - +

Lines Render Tests

diff --git a/packages/web2d/test/playground/polyLine.html b/packages/web2d/test/playground/polyLine.html index ac167dcd..ae1cc1f0 100755 --- a/packages/web2d/test/playground/polyLine.html +++ b/packages/web2d/test/playground/polyLine.html @@ -3,22 +3,15 @@ - + +

PolyLines Render Tests

- - - - + +
Different types of PolyLines that can be used. @@ -37,6 +30,7 @@
diff --git a/packages/web2d/test/playground/prototype.html b/packages/web2d/test/playground/prototype.html index 8fdf3bdc..b977f99d 100755 --- a/packages/web2d/test/playground/prototype.html +++ b/packages/web2d/test/playground/prototype.html @@ -1,13 +1,9 @@ + - + diff --git a/packages/web2d/test/playground/rect.html b/packages/web2d/test/playground/rect.html index 27ff5547..11c042a4 100755 --- a/packages/web2d/test/playground/rect.html +++ b/packages/web2d/test/playground/rect.html @@ -3,12 +3,7 @@ - + @@ -17,10 +12,7 @@

Rect Render Tests

- - - - + - - +
Straight Lines. @@ -41,8 +33,7 @@
diff --git a/packages/web2d/test/playground/shapes.html b/packages/web2d/test/playground/shapes.html index 87c3b5b5..c2708db0 100755 --- a/packages/web2d/test/playground/shapes.html +++ b/packages/web2d/test/playground/shapes.html @@ -3,12 +3,7 @@ - + @@ -16,10 +11,7 @@

Element properties Tests

- - - - + - +
Stroke Styles. @@ -81,7 +73,7 @@
diff --git a/packages/web2d/test/playground/styles.css b/packages/web2d/test/playground/styles.css new file mode 100644 index 00000000..25b35990 --- /dev/null +++ b/packages/web2d/test/playground/styles.css @@ -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; + } \ No newline at end of file diff --git a/packages/web2d/test/playground/text.html b/packages/web2d/test/playground/text.html index 66245424..6dbb2a5e 100755 --- a/packages/web2d/test/playground/text.html +++ b/packages/web2d/test/playground/text.html @@ -1,91 +1,14 @@ - - - - - + - - +

Text Render Tests

- - - - - + - - +
Simple text @@ -99,15 +22,15 @@
+ Text to Inspect: - + \ No newline at end of file diff --git a/packages/web2d/test/playground/text.js b/packages/web2d/test/playground/text.js new file mode 100644 index 00000000..4cce4a7d --- /dev/null +++ b/packages/web2d/test/playground/text.js @@ -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); diff --git a/packages/web2d/test/playground/workspace.html b/packages/web2d/test/playground/workspace.html index 45f2a74e..ef0a8c1d 100755 --- a/packages/web2d/test/playground/workspace.html +++ b/packages/web2d/test/playground/workspace.html @@ -3,23 +3,14 @@ - + - +

Workspace Render Tests

- - - - - + - +
The Workspace's size defines the visible work area. If an element is outside the workspace, it must not @@ -126,8 +117,9 @@
+ diff --git a/packages/web2d/webpack.playground.js b/packages/web2d/webpack.playground.js index 634cef44..d51f75a1 100644 --- a/packages/web2d/webpack.playground.js +++ b/packages/web2d/webpack.playground.js @@ -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', + }, + ), ], };