search

informatics-isi-edu / openseadragon-viewer

2D viewer with openseadragon
Apache License 2.0
5 stars 2 forks source link

Refactoring SVG read, write and update #38

Closed rastogi-bhavya closed 4 years ago

rastogi-bhavya commented 4 years ago

Reading SVG file

For each object (rectangle, circle and line) an object is created with certain default values this._attrs. This object is then used for handling all modifications like change in color (stroke) or the line thickness (stroke-width). renderSVG function is used for rendering the SVG object on to the viewer. To do this it reads this._attrs and adds all the values to the SVG to be drawn.

Writing the SVG

When we start to draw a new SVG object, first an empty object is created with the appropriate tag i.e. rect, circle or line. After the drawing is finished insertPoint function is called to add the new values to the object that was created earlier. Once the drawing is finished and the save button is clicked the exportToSVG function is called which creates the SVG file by combining each object in its proper hierarchy, along with desired attribute values from this._attrs

rastogi-bhavya commented 4 years ago

How to handle attributes/properties

We have a set of attributes (currently we are not handling every attribute) that are handled by our system. When the SVG file is read, an attributes object is created for each component (rect, line, circle). This object is initialized with the predefined default values. For each component, the attributes are first read from the file and added/updated (added in case it is an attribute which is currently not supported) to the attributes object. The SVG component is rendered according to the properties in this object. Whenever this object is changed the SVG component is rendered again with the new values. The output SVG file is created according to this attributes ( + ignored-attributes) object.

Certain properties require special handling. These properties/attributes are divided into the following categories:

  1. Attributes which are governed by URL params (eg. stroke-width, vector-effect): While reading such an attribute, they are added to the attributes object as is, however the URL params are checked while rendering to make sure that the proper value is used while rendering the SVG object. Thus when the time comes to write these values to an SVG file we can get the original values that were used in actual file.

  2. Attributes that are necessary for rendering the component (eg. color): Such attributes have a default value that is initialized at the time of creating the attributes object. This is necessary so that even if these attributes are missing the SVG file the components can be rendered. When modifying such a file like adding a new line, the missing property should be added to that particular line which is added, without adding it to the original components.

  3. Attributes that are not currently supported by our system: A different object of such attributes is created while reading the SVG file ignored-attributes. These attributes are not used while rendering the SVG component. For example if the SVG file has property stroke-dasharray which cause lines to appear as dashed lines, then our system would just add such a property to ignored-attributes object instead of attributes object and the render line would a continuous one. While modifying such a component, the ignore attributes would be added to the output SVG file.

How the Save function may work

When saving a file the following things would be handled:

  1. If an attribute is defines both as an attribute and inside the style, then only the style value would be saved.
  2. Before saving, we may check to see if any actual change has been made to the file, if none then no change would be made. This would reduce the number of calls to the database