diff --git a/packages/web2d/test/javascript/render/arrow.html b/packages/web2d/test/javascript/render/arrow.html index 0f1ac5c6..65c34b48 100644 --- a/packages/web2d/test/javascript/render/arrow.html +++ b/packages/web2d/test/javascript/render/arrow.html @@ -1,7 +1,15 @@ + + + + -

PolyLines Render Tests

+

PolyLines Render Tests

- -- - - - - - +
- Different types of PolyLines that can be used. - -
-
+ + + + + + + - - - - + + + + - -
+ Different types of PolyLines that can be used. + +
+
- This is how multiple childs will look in each style line - -
-
+ This is how multiple childs will look in each style line + +
+
+ + - + + \ No newline at end of file diff --git a/packages/web2d/test/javascript/render/curvedLine.html b/packages/web2d/test/javascript/render/curvedLine.html index f17c9b8f..6b6270e6 100644 --- a/packages/web2d/test/javascript/render/curvedLine.html +++ b/packages/web2d/test/javascript/render/curvedLine.html @@ -1,7 +1,14 @@ + + + -

Elements Event Handling

- +
diff --git a/packages/web2d/test/javascript/render/font.html b/packages/web2d/test/javascript/render/font.html index 00230a51..2ae8762f 100644 --- a/packages/web2d/test/javascript/render/font.html +++ b/packages/web2d/test/javascript/render/font.html @@ -1,7 +1,14 @@ + + + -

Group Render Tests.

-
-- - - - - - +

Group Render Tests.

+
- A group object can be used to collect shapes. In this example, - There is a group that contains an elipse and two lines as children. - Changing the group position also change the position of all contained - elements. - -
-
+ + + + + + + - + - - - - + + + + - - - - + + + - + The blue one has been added as a child of another group with the following properties::
+
+ Size(50,50);
+ Position(25,25);
+ CoordSize(100,100);
+ CoordOrigin(0,0);
+
+ Finally, the second group has been added as a child of the first declared group. + + - + - - - - + + - +
+ (3) +
+ + + - - - - + + - +
+ (3) +
+ + + - + - - - - - + + + + + - - - - - + + + + + -
+ A group object can be used to collect shapes. In this example, + There is a group that contains an elipse and two lines as children. + Changing the group position also change the position of all contained + elements. + +
+
- Following the bubbling event pattern, all the events over a shape are propageted to its - parent. In this example, both elipse objects are child of a group element and click event listeners - have been added to the elipse and the group. - -
-
+ Following the bubbling event pattern, all the events over a shape are propageted to its + parent. In this example, both elipse objects are child of a group element and click event listeners + have been added to the elipse and the group. + +
+
- Groups can be nested as a regular shape. An important property of the groups is the ability - to define their own coordSize, coorOrigin and size. In this example, both shapes have been - created with the same properties. The red one has been added as a child element of a group with the - following properties:
-
- Size(50,50);
- Position(25,25);
- CoordSize(100,100);
- CoordOrigin(0,0)
+
+ Groups can be nested as a regular shape. An important property of the groups is the ability + to define their own coordSize, coorOrigin and size. In this example, both shapes have been + created with the same properties. The red one has been added as a child element of a group with the + following properties:
+
+ Size(50,50);
+ Position(25,25);
+ CoordSize(100,100);
+ CoordOrigin(0,0)
- The blue one has been added as a child of another group with the following properties::
-
- Size(50,50);
- Position(25,25);
- CoordSize(100,100);
- CoordOrigin(0,0);
-
- Finally, the second group has been added as a child of the first declared group. - 		-
-
+
+
- Group coordsize defines how many units there are along the width of the containing block. - In all the examples, the coordsize of the workspaces have been set to (100,100) and the circles have been - positioned - at (0,0),(0,100),(100,0),(100,100)(50,50).
-
- 1) Group with CoordSize(100,100)
- 2) Group with CoordSize(100,200)
- 3) Group with CoordSize(200,100)
- 		-
-
- (1) -
+ +
+ Group coordsize defines how many units there are along the width of the containing block. + In all the examples, the coordsize of the workspaces have been set to (100,100) and the circles have + been + positioned + at (0,0),(0,100),(100,0),(100,100)(50,50).
+
+ 1) Group with CoordSize(100,100)
+ 2) Group with CoordSize(100,200)
+ 3) Group with CoordSize(200,100)
+ 		+
+
+ (1) +
-
- (2) -
+
+ (2) +
-
- (3) -
-
-
- Group coordorigin defines the coordinate at the top left corner of the containing block. - In all the examples,the coordsize of the groups have been set to (100,100) and the circles have been positioned - at (0,0),(0,100),(100,0),(100,100)(50,50).
-
- 1) Group with CoordOrigin(0,0)
- 2) Group with CoordOrigin(0,50)
- 3) Group with CoordOrigin(50,0)
- 		-
-
- (1) -
+ +
+ Group coordorigin defines the coordinate at the top left corner of the containing block. + In all the examples,the coordsize of the groups have been set to (100,100) and the circles have been + positioned + at (0,0),(0,100),(100,0),(100,100)(50,50).
+
+ 1) Group with CoordOrigin(0,0)
+ 2) Group with CoordOrigin(0,50)
+ 3) Group with CoordOrigin(50,0)
+ 		+
+
+ (1) +
-
- (2) -
+
+ (2) +
-
- (3) -
-
-
- Visibility can be used to hide an element and disable all the element events. - In the case of a group, this property is applied to all the children elements. - -
-
+ Visibility can be used to hide an element and disable all the element events. + In the case of a group, this property is applied to all the children elements. + +
+
- Scale. - -
-
+ Scale. + +
+
+ - + + \ No newline at end of file diff --git a/packages/web2d/test/javascript/render/index.html b/packages/web2d/test/javascript/render/index.html index 64abcd43..d7277589 100644 --- a/packages/web2d/test/javascript/render/index.html +++ b/packages/web2d/test/javascript/render/index.html @@ -1,27 +1,30 @@ - - - - Testing - - -
-

Testing

- -
- - + + + + + Testing + + + +
+

Testing

+ +
+ + + \ No newline at end of file diff --git a/packages/web2d/test/javascript/render/line.html b/packages/web2d/test/javascript/render/line.html index 6d4a4e5c..310ff860 100755 --- a/packages/web2d/test/javascript/render/line.html +++ b/packages/web2d/test/javascript/render/line.html @@ -1,7 +1,14 @@ + + - - + web2d.peer = + { + svg: {} + }; + + web2d.peer.utils = {}; + + + -

Element properties Tests

+

Element properties Tests

- - - - - - - - - +
- Stroke Styles. - -
-
-
-
-
-
+ + + + + + + + - - - + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - - - + + + + - + -
+ Stroke Styles. + +
+
+
+
+
+
- Stroke Width. - -
-
+ Stroke Width. + +
+
- Stroke Opacity. - -
-
+ Stroke Opacity. + +
+
- Fill Opacity. - -
-
+ Fill Opacity. + +
+
- Opacity. - -
-
+ Opacity. + +
+
- Visibility. - -
-
+ Visibility. + +
+
+ - + + \ No newline at end of file diff --git a/packages/web2d/test/javascript/render/text.html b/packages/web2d/test/javascript/render/text.html index d9b83126..6ed9b29f 100755 --- a/packages/web2d/test/javascript/render/text.html +++ b/packages/web2d/test/javascript/render/text.html @@ -1,7 +1,15 @@ + + + - - - - workspacePixel.append(elipse); - workspacePixel.addItAsChildTo($('#sizeExamplePixels')); + + + } + -

Workspace Render Tests

+

Workspace Render Tests

- - - - - - - - +
- The Workspace's size defines the visible work area. If an element is outside the workspace, it must not be - visible. - In this example, The back circle is bigger than the workspace area. A big portion of the circle will not be - displayed. - -
-
+ + + + + + + - - - - - - + + + + + + - - - - + + - - - - - + + + + + + -
- (3) + +
+ + + -
- (4) -
- - - - - - - - - - -
+ The Workspace's size defines the visible work area. If an element is outside the workspace, it must not + be + visible. + In this example, The back circle is bigger than the workspace area. A big portion of the circle will not + be + displayed. + +
+
- Workspace will be added as child of a div element. That's why, Its parent will define this position. - -
-
+ Workspace will be added as child of a div element. That's why, Its parent will define this position. + +
+
- Workspaces size can be defined using standard CSS measures. - In this example, the first workspace is defined using pixes and the second one - using inchs. - -
-
+ +
+ Workspaces size can be defined using standard CSS measures. + In this example, the first workspace is defined using pixes and the second one + using inchs. + +
+
-
-
-
- Workspace coordsize defines how many units there are along the width of the containing block. - In all the examples,the coordsize of the workspaces have been set to (100,100) and the circles have been - positioned - at (0,0),(0,100),(100,0),(100,100)(50,50).
-
- 1) Workspace with CoordSize(100,100)
- 2) Workspace with CoordSize(100,200)
- 3) Workspace with CoordSize(200,100)
- 4) Workspace animation changing the coordsize from (30,30) to (100,100)
- 		-
-
- (1) +
+
+ Workspace coordsize defines how many units there are along the width of the containing block. + In all the examples,the coordsize of the workspaces have been set to (100,100) and the circles have been + positioned + at (0,0),(0,100),(100,0),(100,100)(50,50).
+
+ 1) Workspace with CoordSize(100,100)
+ 2) Workspace with CoordSize(100,200)
+ 3) Workspace with CoordSize(200,100)
+ 4) Workspace animation changing the coordsize from (30,30) to (100,100)
+ 		+
+
+ (1) +
-
- (2) +
+ (2) +
+ +
+ (3) +
+ +
+ (4) +
+
+ Workspace coordorigin defines the coordinate at the top left corner of the containing block. + In all the examples,the coordsize of the workspaces have been set to (100,100) and the circles have been + positioned + at (0,0),(0,100),(100,0),(100,100)(50,50).
+
+ 1) Workspace with CoordOrigin(0,0)
+ 2) Workspace with CoordOrigin(0,50)
+ 3) Workspace with CoordOrigin(50,0)
+ 4) Workspace animation changing the coordorigin from (0,0) to (50,50)
+ 		+
+
+ (1) +
+ +
+ (2) +
+ +
+ (3) +
+ +
+ (4) +
+
- Workspace coordorigin defines the coordinate at the top left corner of the containing block. - In all the examples,the coordsize of the workspaces have been set to (100,100) and the circles have been - positioned - at (0,0),(0,100),(100,0),(100,100)(50,50).
-
- 1) Workspace with CoordOrigin(0,0)
- 2) Workspace with CoordOrigin(0,50)
- 3) Workspace with CoordOrigin(50,0)
- 4) Workspace animation changing the coordorigin from (0,0) to (50,50)
- 		-
-
- (1) -
- -
- (2) -
- -
- (3) -
- -
- (4) -
-
-
+ - + + \ No newline at end of file