- From: Fred P. <fprog26@hotmail.com>
- Date: Sat, 17 May 2003 18:48:05 -0400
- To: arazdow@mathsoft.com, www-svg@w3.org
- Cc: Kim.Marriott@infotech.monash.edu.au
Study case: A simple flexible design - Grid VS onRefresh JavaScript Event
Handler
Let's take a simple case of springs:
------------------------------------
(0,0)
.0 1 2 3
.012345678901234567890123456789012345
0+----------------------------------+
1| z z |
2| (9,3) z (22,3) z |
3| +---+ +---+ |
4|zzzzzzzz| A |zzzzzzzz| B |zzzzzzzz|
5| +---+ +---+ |
6| z z |
7| z z |
8+----------------------------------+ (W,H)
Spring conversion into one-way constraint functions
can be derived with some low level logic:
Notice that any thing calculation are integer based mostly using floor(x)
A.x = (document.width - A.width - B.width) * 1/3 + 1
A.x = (35 - 5 - 5) * 1/3 + 1
A.x = (25 ) * 1/3 + 1
A.x = 8.33 + 1
A.x = 9.33
A.x = 9
A.y = (document.height - A.height - B.height) * 1/2 + 1
A.y = (8 - 3) / 2 + 1
A.y = 5 /2 + 1
A.y = 2.5 + 1
A.y = 3.5
A.y = 3
B.x = (document.width - A.width - B.width) * 2/3 + A.width + 1
B.x = (35 - 5 - 5) * 2/3 + 5 + 1
B.x = (25 ) * 2/3 + 5 + 1
B.x = 16.67 + 6
B.x = 22.67
B.x = 22
B.y = (document.height - A.height - B.height) * 1/2 + 1
B.y = (8 - 3) / 2 + 1
B.y = 5 /2 + 1
B.y = 2.5 + 1
B.y = 3.5
B.y = 3
Acyclic Dependancy:
===================
A.width --> textA.width
A.height --> textA.height
B.width --> textB.width
B.height --> textB.height
textA.x --> A.x --> document.width | A.width | B.width
--> textA.width | textB.width
textA.y --> A.y --> document.height | A.height | B.height
--> textA.height | textB.height
textB.x --> B.x --> document.width | A.width | B.width
--> textA.width | textB.width
textB.y --> B.y --> document.height | A.height | B.height
--> textA.height | textB.height
Version with onRefresh event handler and JavaScript:
====================================================
(0,0)
.0 1 2 3
.012345678901234567890123456789012345
0+----------------------------------+
1| z z |
2| (9,3) z (22,3) z |
3| +---+ +---+ |
4|zzzzzzzz| A |zzzzzzzz| B |zzzzzzzz|
5| +---+ +---+ |
6| z z |
7| z z |
8+----------------------------------+ (W,H)
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg SYSTEM
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg height="600" width="1000">
<defs>
<style type="text/css">
<![CDATA[
svg = { max_iteration: 100; }
]]>
</style>
<!-- Assuming 10px spacing between the box border and the text -->
<script language="JavaScript">
<![CDATA[
var offset = 10px;
]]>
</script>
</defs>
<rect id="A"
x="100"
y="100"
width="100"
height="100"
style="fill:#FFFF00; stroke:#000000; shape-rendering: optimizeSpeed;"
onRefresh="javascript:
A.x = ( (document.width - A.width - B.width ) * 1/3 + 1 );
A.y = ( (document.height - A.height - B.height) * 1/2 + 1 );
A.width = ( offset + textA.width + offset );
A.height = ( offset + textA.height + offset );
"/>
<rect id="B"
x="150"
y="100"
width="100"
height="100"
style="fill:#00FFFF; stroke:#000000; shape-rendering: optimizeSpeed;"
onRefresh="javascript:
B.x = ( (document.width - A.width - B.width ) * 2/3 + A.width + 1
);
B.y = ( (document.height - A.height - B.height) * 1/2 + 1 );
B.width = ( offset + textB.width + offset );
B.height = ( offset + textB.height + offset );
"/>
<text id="textA"
x="110"
y="110"
style="font:arial; font-size:8pt; text-rendering:optimizeSpeed;"
onRefresh="javascript:
textA.x = ( A.x + offset );
textA.y = ( A.y + offset );
">A</text>
<text id="textB"
x="160"
y="110"
style="font:arial; font-size:8pt; text-rendering:optimizeSpeed;"
onRefresh="javascript:
textB.x = ( B.x + offset );
textB.y = ( B.y + offset );
">B</text>
<!-- d[0] d[1] d[2] d[3] d[4] d[5] d[6] d[7] d[8] d[9] d[10] d[11] d[12]
-->
<path d="M 10 10 l 5 0 l 0 5 l -5 0 z"
style="fill:#00FFFF; stroke:#000000; shape-rendering: optimizeSpeed;"
onRefresh="javascript:
var len = 50px;
// Modify d[1]
if ( viewport.right-viewport.left > 10px )
{ this.path.d[1] = viewport.left+10px; }
else
{ this.path.d[1] = 0.5*viewport.right+0.5*viewport.left; }
this.path.d[ 4] = len;
this.path.d[ 8] = len;
this.path.d[10] = -len;
"/>
</svg>
Version with Grids:
===================
(0,0)
.0 1 2 3
.012345678901234567890123456789012345
0+----------------------------------+
1| z z |
2| (9,3) z (22,3) z |
3| +---+ +---+ |
4|zzzzzzzz| A |zzzzzzzz| B |zzzzzzzz|
5| +---+ +---+ |
6| z z |
7| z z |
8+----------------------------------+ (W,H)
Grid version:
-------------
(0,0)
.0 1 2 3
.012345678901234567890123456789012345
0+--------+---+--------+---+--------+
1| | z | | z | | 50%
2| (9,3)| z | (22,3)| z | |
3+--------+---+--------+---+--------+
4|zzzzzzzz| A |zzzzzzzz| B |zzzzzzzz| *
5+--------+---+--------+---+--------+
6| | z | | z | |
7| | z | | z | | 50%
8+--------+---+--------+---+--------+ (W,H)
33% * 33% * 33%
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg SYSTEM
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg height="600" width="1000">
<defs>
<!-- Creates the box with an A in it -->
<g id='groupA'>
<grid>
<!-- Assuming 10px spacing between the box border and the text -->
<cell row='1'
col='1'
rowspan='1'
colspan='1'
cellspacing='10px'
cellpadding='1px'
style="fill:#FFFF00; stroke:#000000; shape-rendering:
optimizeSpeed;"
shape="rect"
><text id="textA"
style="font:arial; font-size:8pt; text-rendering:optimizeSpeed;"
>A</text>
</cell>
</grid>
</g>
<!-- Creates the box with a B in it -->
<g id='groupB'>
<grid>
<!-- Assuming 10px spacing between the box border and the text -->
<cell row='1'
col='1'
rowspan='1'
colspan='1'
cellspacing='10px'
cellpadding='1px'
style="fill:#00FFFF; stroke:#000000; shape-rendering:
optimizeSpeed;"
shape="rect"
><text id="textA"
style="font:arial; font-size:8pt; text-rendering:optimizeSpeed;"
>B</text>
</cell>
</grid>
</g>
</defs>
<!-- Creates the flexible sizing grid -->
<grid>
<!-- First row -->
<cell row='1'
col='1'
rowspan='1'
colspan='3'
cellspacing='0'
cellpadding='0'
shape='rect'
width='100%'
height='50%'
> </cell>
<!-- Second row -->
<cell row='2'
col='1'
rowspan='1'
colspan='1'
cellspacing='0'
cellpadding='0'
shape='rect'
width='33%'
> </cell>
<cell row='2'
col='2'
rowspan='1'
colspan='1'
cellspacing='0'
cellpadding='0'
shape='rect'
><use xlink:href='#groupA' x='0' y='0'/></cell>
<cell row='2'
col='3'
rowspan='1'
colspan='1'
cellspacing='0'
cellpadding='0'
shape='rect'
width='33%'
> </cell>
<cell row='2'
col='4'
rowspan='1'
colspan='1'
cellspacing='0'
cellpadding='0'
shape='rect'
><use xlink:href='#groupB' x='0' y='0'/></cell>
<cell row='2'
col='5'
rowspan='1'
colspan='1'
cellspacing='0'
cellpadding='0'
shape='rect'
width='33%'
> </cell>
<!-- Third row -->
<cell row='3'
col='1'
rowspan='1'
colspan='3'
cellspacing='0'
cellpadding='0'
shape='rect'
width='100%'
height='50%'
> </cell>
</grid>
</svg>
Sincerely yours,
Fred.
_________________________________________________________________
The new MSN 8: smart spam protection and 2 months FREE*
http://join.msn.com/?page=features/junkmail
Received on Saturday, 17 May 2003 18:48:13 UTC