2021-07-16 16:41:58 +02:00
|
|
|
<!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">
|
2021-10-03 02:23:32 +02:00
|
|
|
|
2021-07-16 16:41:58 +02:00
|
|
|
<head>
|
2021-12-12 23:28:32 +01:00
|
|
|
<link rel="stylesheet" href="styles.css">
|
2021-07-16 16:41:58 +02:00
|
|
|
</head>
|
|
|
|
|
|
2021-12-05 00:39:20 +01:00
|
|
|
<body>
|
|
|
|
|
<h1>Group Render Tests</h1>
|
2021-10-03 02:23:32 +02:00
|
|
|
<table>
|
2021-12-12 23:28:32 +01:00
|
|
|
<tbody>
|
2021-10-03 02:23:32 +02:00
|
|
|
<tr>
|
|
|
|
|
<td>
|
|
|
|
|
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.
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<div id="groupBasicContainer" />
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<!-- ************************************************************************** -->
|
|
|
|
|
<tr>
|
|
|
|
|
<td>
|
|
|
|
|
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.
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<div id="groupEventsContainer" />
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
<!-- ************************************************************************** -->
|
|
|
|
|
<tr>
|
|
|
|
|
<td>
|
|
|
|
|
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:<br />
|
|
|
|
|
<br />
|
|
|
|
|
Size(50,50);<br />
|
|
|
|
|
Position(25,25);<br />
|
|
|
|
|
CoordSize(100,100);<br />
|
|
|
|
|
CoordOrigin(0,0)<br />
|
|
|
|
|
|
|
|
|
|
The blue one has been added as a child of another group with the following properties::<br />
|
|
|
|
|
<br />
|
|
|
|
|
Size(50,50);<br />
|
|
|
|
|
Position(25,25);<br />
|
|
|
|
|
CoordSize(100,100);<br />
|
|
|
|
|
CoordOrigin(0,0);<br />
|
|
|
|
|
<br />
|
|
|
|
|
Finally, the second group has been added as a child of the first declared group.
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<div id="groupNestedContainer" />
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- ************************************************************************** -->
|
|
|
|
|
<tr>
|
|
|
|
|
<td>
|
|
|
|
|
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).<br />
|
|
|
|
|
<br />
|
|
|
|
|
1) Group with CoordSize(100,100)<br />
|
|
|
|
|
2) Group with CoordSize(100,200)<br />
|
|
|
|
|
3) Group with CoordSize(200,100)<br />
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<div style="position:relative;width:100%;">
|
|
|
|
|
<div id="coordsizeExample100x100" style="float:left;margin:20px;">
|
|
|
|
|
(1)
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="coordsizeExample100x200" style="float:left;margin:20px;">
|
|
|
|
|
(2)
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="coordsizeExample200x100" style="float:left;margin:20px;">
|
|
|
|
|
(3)
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<!-- ************************************************************************** -->
|
|
|
|
|
<tr>
|
|
|
|
|
<td>
|
|
|
|
|
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). <br />
|
|
|
|
|
<br />
|
|
|
|
|
1) Group with CoordOrigin(0,0)<br />
|
|
|
|
|
2) Group with CoordOrigin(0,50)<br />
|
|
|
|
|
3) Group with CoordOrigin(50,0)<br />
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<div style="position:relative;width:100%;">
|
|
|
|
|
<div id="coordOriginExample0x0" style="float:left;margin:20px;">
|
|
|
|
|
(1)
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="coordOriginExample0x50" style="float:left;margin:20px;">
|
|
|
|
|
(2)
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="coordOriginExample50x0" style="float:left;margin:20px;">
|
|
|
|
|
(3)
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<!-- ************************************************************************** -->
|
|
|
|
|
<tr>
|
|
|
|
|
<td>
|
|
|
|
|
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.
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<div id="visibilityExample" style="float:left;margin:20px;"></div>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<!-- ************************************************************************** -->
|
|
|
|
|
<tr>
|
|
|
|
|
<td>
|
|
|
|
|
Scale.
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<div id="scaleStrokeExample" style="float:left;margin:20px;"></div>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
2021-12-12 23:28:32 +01:00
|
|
|
</tbody>
|
2021-10-03 02:23:32 +02:00
|
|
|
</table>
|
2021-07-16 16:41:58 +02:00
|
|
|
</body>
|
2021-10-03 02:23:32 +02:00
|
|
|
|
|
|
|
|
</html>
|
