History for DiagramEditorOutput

changed:
-
The output of Graph Editor is a SVG file with some extenstions. It could be open by any SVG reader (e.g. Adobe IE SVG plugin). The SVG divided into three groups - Connectors, Terminals and Blocks. 

Connectors group::

 <g type="Connectors" id="1">

    <polyline id=num From=endOfLine_num To=block_num(*100) + inpin_num ... /> 
    <polyline id=num From=block_num(*100)+ outpin_num To=block_num(*100) + inpin_num .../> 
    //-------------------------//-----------------------//----------------//---
    <polyline id=num  From=terminal_num To=block_num(*100) + inpin_num ... /> 
    //-------------------------//-----------------------//----------------//---

 </g>

The group 'Connectors' contains connectors of the diagram. Each connector has unique number in the diagram and it is 'id' of the connector.
The connector is 'polyline' node. This node has attributes 'From' and 'To'. 
These attributes specify what elements connect this connector.

The pin id consists of block id + inpin or outpin id (ex. 1275, 12 is block id and 75 is 'inpin' or 'outpin' id). If any of the ends of polyline (connector)is free, the id is the id of ending 'path' node (endOfLine element).


Terminals group::

 <g type="Terminals" id="2">

    <path class="endOfLineStyle" ..... id=num />  (free end of the line)
    <g id=num type="terminal">
      <text id=out/in > OUT/IN </text>
      <path ...>
    </g>
    //-------------------------//-----------------------//----------------//---    <g id=num type="terminal">
      <text id=out/in > OUT/IN </text>
      <path ...>
    </g>
    //-------------------------//-----------------------//----------------//---
 </g>

The group 'Terminals' contains terminals and endOfLine elements of the diagram. Each terminal or endOfLine elements has unique number (id) in the diagram.
The terminal is 'g' node which has attribute type = " terminal" and id = num. The first element ('g' node) in this node is "text" node  "in" or "out". The second node is "path" element, it is appearance of an element.

The endOfLine element is only "path" node. 
'path' element in the "Terminals" group is drawn as a small rectangle on the polyline free end. It can have an attribute class = "endOfLineStyle", which describes the style of drawing path.


Blocks group::

 <g type="Blocks" id="3">

    <g type="block" id=block+num  > 
       <g ...>
          <rect ... />
          <text ...> Block name </text>
        </g>
      <g type=inpin/outpin  id=num>
             <path .../>   (inpin and outpin points of the block)  
             <text .../>
      </g>

 //-------------------------//-----------------------//-------------------//---
     </g>
 </g>


The group 'Blocks' contains blocks. Each block has unique number in the diagram. This number is id the block. 

'Structure of the block' 
The block is 'g' node which has attribute type = "block" and id = num.
The first element ('g' node) in this node is head of the block. There are "rect" and "text" nodes.
 - "rect" is just an example of element view, it can be any other, but must contain id. It can have an attribute class = "elemStyle" which describes the style of drawing rectangle.
 - "text" node is a title of the element or any other text that can be bound up with rectangle.
Others elements in the 'g' node (where type = "block") are inpins and outpins elements.

Each pin has unique number in the block. This number is id of the pin in block.
But pin id in the diagram is (block id)* 100 + pin id. 
The pin is 'g' node which has attribute type = inpin / outpin and id.
This 'path' element of blocks group is a place on the triangle from which lines go out or come in (outpin and inpin). It has a class="pinStyle", which describes the style of the path and pure description of the path (standard attribute d).
'text' node  is a text that can be bound up with inpin or outpin.


Example::

 <svg> 
   <g name="New Device 1" transform="translate(0 0)" id="1" sourcename="NewDevice1.svg" href="">
   <rect stroke="#ffffff" fill="#FFFFCC" height="816" width="1144" y="0" x="0" id="diagram" />
  <g type="Connectors" id="1">
    <polyline class="lineStyle" To="103" From="102" points="359,173 369,173 369,100 213,100 213,173 223,173" id="2" />
    <polyline class="lineStyle" To="203" From="107" points="359,236 379,236 379,142 526,142" id="5" />
    <polyline class="lineStyle" To="108" From="1" points="128,266 138,266 138,236 223,236" id="6" />
    <polyline class="lineStyle" To="2" From="204" points="665,218 675,218 675,272 815,272" id="7" />
    <polyline class="lineStyle" To="205" From="3" points="451,434 477,434 477,290 526,290" id="8" />
    <polyline class="lineStyle" To="109" From="4" points="119,195 129,195 129,201 223,201" id="9" />
  </g>
  <g type="Terminals" id="2">
    <g type="terminal" transform="translate(128 266)" id="1">
      <text class="terminalTextStyle" id="in" startOffset="0" y="4" x="-30"> IN  </text>
      <path class="terminalStyle" d="M0,0 L-5,0 L-20,-8 L-40,-8 L-40,8 L-20,8 L-5,0Z" />
    </g>
    <g type="terminal" transform="translate(815 272)" id="2">
      <text class="terminalTextStyle" id="out" startOffset="0" y="4" x="10"> OUT  </text>
      <path class="terminalStyle" d="M0,0 L5,0 L5,-8 L25,-8 L40,0 L25,8 L5,8 L5,0Z" />
    </g>
    <path class="endOfLineStyle" d="M-3,-3 L-3,3 L3,3 L3,-3Z" transform="translate(451 434)" id="3" />
    <path class="endOfLineStyle" d="M-3,-3 L-3,3 L3,3 L3,-3Z" transform="translate(119 195)" id="4" />
  </g>
  <g type="Blocks" id="3">
    <g type="block" transform="translate(223 110)" id="1">
      <g transform="translate(0 0)" stroke="#000000">
        <rect stroke="#000000" stroke-width="0.5" fill="#999966" height="191" width="136" y="0" x="0" />
        <text class="titlePart" startOffset="0" y="15" x="68">  Part1 name </text>
      </g>
      <g type="inpin" id="3" transform="translate(0 63)">
        <path class="pinStyle" d="M-10,0 L0,0 M0,-5 L0,5 L5,0 L0,-5Z" />
        <text class="pinTextStyle" startOffset="0" y="4" x="8">   in3   </text>
      </g>
      <g type="inpin" id="9" transform="translate(0 91)">
        <path class="pinStyle" d="M-10,0 L0,0 M0,-5 L0,5 L5,0 L0,-5Z" />
        <text class="pinTextStyle" startOffset="0" y="4" x="8">    in9     </text>
      </g>
      <g type="inpin" id="8" transform="translate(0 126)">
        <path class="pinStyle" d="M-10,0 L0,0 M0,-5 L0,5 L5,0 L0,-5Z" />
        <text class="pinTextStyle" startOffset="0" y="4" x="8">     in8     </text>
      </g>
      <g type="outpin" id="2" transform="translate(136 63)">
        <path class="pinStyle" d="M10,0 L0,0 L-5,-5 L-5,5 L0,0Z" />
        <text class="pinTextStyle" startOffset="0" y="4" x="-35">   out2  </text>
      </g>
      <g type="outpin" id="7" transform="translate(136 126)">
        <path class="pinStyle" d="M10,0 L0,0 L-5,-5 L-5,5 L0,0Z" />
        <text class="pinTextStyle" startOffset="0" y="4" x="-35">   out7   </text>
      </g>
    </g>
    <g type="block" transform="translate(526 108)" id="2">
      <g transform="translate(0 0)">
        <rect stroke="#000000" stroke-width="0.5" fill="#ffffff" height="246" width="139" y="0" x="0" />
        <text class="titlePart" startOffset="0" y="15" x="69">    Part2 name   </text>
      </g>
      <g type="inpin" id="3" transform="translate(0 34)">
        <path class="pinStyle" d="M-10,0 L0,0 M0,-5 L0,5 L5,0 L0,-5Z" />
        <text class="pinTextStyle" startOffset="0" y="4" x="8">    in3   </text>
      </g>
      <g type="inpin" id="5" transform="translate(0 182)">
        <path class="pinStyle" d="M-10,0 L0,0 M0,-5 L0,5 L5,0 L0,-5Z" />
        <text class="pinTextStyle" startOffset="0" y="4" x="8">    in5    </text>
      </g>
      <g type="outpin" id="4" transform="translate(139 110)">
        <path class="pinStyle" d="M10,0 L0,0 L-5,-5 L-5,5 L0,0Z" />
        <text class="pinTextStyle" startOffset="0" y="4" x="-35">    out4  </text>
      </g>
    </g>
   </g>
  </g>
 </svg>