RE: SVG 1.2 Working Draft: Comments on 3.2.7 Expression-based at tribute values

From: Fred P. <fprog26@hotmail.com>
Date: Sat, 17 May 2003 18:48:05 -0400

Message-ID: <BAY2-F141ERRFKJV7Vp0000664a@hotmail.com>
```
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'
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'
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'
shape='rect'
width='100%'
height='50%'
> </cell>

<!-- Second row -->
<cell row='2'
col='1'
rowspan='1'
colspan='1'
cellspacing='0'
shape='rect'
width='33%'
> </cell>

<cell row='2'
col='2'
rowspan='1'
colspan='1'
cellspacing='0'
shape='rect'

<cell row='2'
col='3'
rowspan='1'
colspan='1'
cellspacing='0'
shape='rect'
width='33%'
> </cell>

<cell row='2'
col='4'
rowspan='1'
colspan='1'
cellspacing='0'
shape='rect'

<cell row='2'
col='5'
rowspan='1'
colspan='1'
cellspacing='0'
shape='rect'
width='33%'
> </cell>

<!-- Third row -->
<cell row='3'
col='1'
rowspan='1'
colspan='3'
cellspacing='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

This archive was generated by hypermail 2.3.1 : Wednesday, 8 March 2017 09:46:56 UTC