Geometry

Geometry and related calculations in CIMDraw

The CIMDraw diagram needs to handle basic drawing features for single line diagrams and therefore it must correctly represent the geometry of CIM objects in SVG.
This document describes the diagram hamdling code in order to give an idea about how a single line diagram is handled, both for viewing and for editing.

Basic concepts

When a user opens a diagram in CIMDraw all the CIM objects are placed inside the SVG drawing according to the x and y coordinates defined in the diagram itself. As a side note, it is important to remember that the same CIM object can be placed in many different diagrams, each with different coordinates: therefore the x and y values are not a property of the CIM object alone, but of the tuple (CIM object, diagram).
In CIMDraw, the SVG drawing is located in the following position inside the HTML file (using CSS selector syntax):

html body cimdraw div.container-fluid div.row div#app-container.app-container.col-md-12 cimdiagram div.app-diagram svg

If you create a diagram in CIMDraw and then inspect the SVG you will see a structure like the following

<svg width="1200" height="800" style="border: 1px solid black;">
    <g id="diagram-connect"></g>
    <g id="diagram-brush" fill="none" pointer-events="all"></g>
    <g id="diagram-grid" transform="scale(1)"></g>
    <g id="diagram-highlight"></g>
    <g id="diagram-main"></g>
    <g id="diagram-legend" transform="translate(1050,50)"></g>
    <g id="diagram-yAxis" fill="none" font-size="10" font-family="sans-serif" text-anchor="start"></g>
    <g id="diagram-xAxis" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"></g>
</svg>

The actual single line diagram is under the g container with id "diagram-main". The other SVG objects are helpers for various diagram features (for the curious, the diagram-connect is used when the user is connecting different objects with a mouse click or when drawing a new two-dimensional object, the diagram-brush is used to perform selection of multiple objects with the mouse, the diagram-grid is the background grid of the diagram, the diagram-highlight contains the red lines which are shown dynamically to help the user in aligning the diagram objects, the diagram-legend is the one shown in the right part of the diagram and finally the x and y axis provide the coordinates within the diagram).

Resizing of two-dimesional objects

The following figure shows for example the calculations related to the resizing of a two-dimensional object, like a line or a busbar.