| <?xml version='1.0' encoding='utf-8' ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> |
| <title>extensions-provide_custom_bundled_image_shape</title> |
| <link type="text/css" rel="stylesheet" href="../resources/bootstrap.css"/> |
| <link type="text/css" rel="stylesheet" href="../resources/custom.css"/> |
| </head> |
| <body> |
| <h1 id="SiriusProvidecustombundledimageshape">Sirius – Provide custom bundled image shape</h1> |
| <h2 id="Goals">Goals</h2> |
| <ul> |
| <li>Sirius provides a basic image style for node mappings. This style offers a selection of five different shapes. This extension point is used to allow specifiers to provide their own shapes defined in a SVG file.</li> |
| <li>This extension point is an improvement on the |
| <a href="deprecated_extensions-provide_custom_bundled_image_shape.html">org.eclipse.sirius.diagram.bundledImageShape</a> extension point that has limitation and is now deprecated. Both extension points work but only this one will remain in future versions of Sirius. |
| </li> |
| </ul> |
| <h2 id="Defineabundledimageshapeextension">Define a bundled image shape extension</h2> |
| <ul> |
| <li>This extension point is identified as |
| <code>org.eclipse.sirius.diagram.customBundledImageShape</code>. In this extension, there are three required fields: |
| <ul> |
| <li>The Id of the extension is for once required as it will be used to identify the provided shape in the models (VSM and graphical models).</li> |
| <li>The image path, that needs to start with the plug-in name as it is possible to define a bundled image shape extension using an image in a different plug-in.</li> |
| <li>The image label displayed in VSMs (suffixed with the plug-in name where the bundled image shape extension is declared).</li> |
| </ul> |
| </li> |
| </ul> |
| <ul> |
| <li>There are 6 optional parameters in this extension point. These parameters are used to provide the identifier or attribute name concerning the color, border color and border size used in the given SVG file. Here is a list of these parameters: |
| <ul> |
| <li>colorIdentifier, the identifier of the tag defining the inner color of the figure.</li> |
| <li>colorAttribute, the attribute of the tag defining the inner color of the figure.</li> |
| <li>borderColorIdentifier, the identifier of the tag defining the border color of the figure.</li> |
| <li>borderColorAttribute, the attribute of the tag defining the border color of the figure.</li> |
| <li>borderSizeIdentifier, the identifier of the tag defining the border size of the figure.</li> |
| <li>borderSizeAttribute, the attribute of the tag defining the border size of the figure.</li> |
| </ul> |
| </li> |
| <li>As a color or the border size can be defined in a multi-valued property (see example below), on colorAttribute, borderColorAttribute and borderSizeAttribute it is possible to add a subAttributeIdentifier in order to identify this property among the list.</li> |
| </ul> |
| <p>Note that it is possible to provide a non SVG file (like a JPEG) but the colors and border size will not be synchronized with the selected information in the VSM.</p> |
| <h2 id="Examples">Examples</h2> |
| <p>As examples, we will use the sample provided in |
| <a href="https://bugs.eclipse.org/bugs/show_bug.cgi?id=542678">this feature corresponding bugzilla</a> |
| </p> |
| <p>circle.svg defines a ring figure thanks to the following ellipse tag:</p> |
| <pre><ellipse |
| cx="242.58475" |
| cy="254.23729" |
| id="circle4" |
| style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:44.9;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
| rx="217.21455" |
| ry="214.03659" /> |
| |
| </pre> |
| <p>For this file, the extension point is specified as follows:</p> |
| <pre> <extension |
| id="custom.circle.svg" |
| name="Circle" |
| point="org.eclipse.sirius.diagram.customBundledImageShape"> |
| <image |
| imagePath="/542678.design/images/circle.svg" |
| label="custom.circle"> |
| <colorIdentifier |
| colorIdentifier="circle4"> |
| </colorIdentifier> |
| <colorAttribute |
| colorAttribute="style"> |
| <subAttributeIdentifier |
| subAttributeIdentifier="fill"> |
| </subAttributeIdentifier> |
| </colorAttribute> |
| <borderColorIdentifier |
| borderColorIdentifier="circle4"> |
| </borderColorIdentifier> |
| <borderColorAttribute |
| borderColorAttribute="style"> |
| <subAttributeIdentifier |
| subAttributeIdentifier="stroke"> |
| </subAttributeIdentifier> |
| </borderColorAttribute> |
| <borderSizeIdentifier |
| borderSizeIdentifier="circle4"> |
| </borderSizeIdentifier> |
| <borderSizeAttribute |
| borderSizeAttribute="style"> |
| <subAttributeIdentifier |
| subAttributeIdentifier="stroke-width"> |
| </subAttributeIdentifier> |
| </borderSizeAttribute> |
| </image> |
| </extension> |
| |
| </pre> |
| <p>The three properties are defined in a single tag. In the extension point each, colorIdentifier, borderColorIdentifier and borderSizeIdentifier have the same identifier: “circle4”. |
| <br/>Then, the color, border color and border size are all defined in the multi-valued property “style” of the ellipse tag. Likewise, in the extension point, colorAttribute, borderColorAttribute and borderSizeAttribute have the same value: “style”. |
| <br/>Finally, in this “style” property, the color is identified by the attribute “fill”, the border color is identified by the attribute “stroke” and the border color is identified by the attribute “stroke-width”. This is why there is a subAttributeIdentifier with these values under colorAttribute, borderColorAttribute and borderSizeAttribute. |
| </p> |
| <p>Now let’s take the sample circle2.svg. The result is also a ring but in the svg it uses the tag circle as follows:</p> |
| <pre> <circle id="circle" cx="250" cy="250" r="210" fill="#fff" stroke="#000" stroke-width="8"/> |
| |
| </pre> |
| <p>Here there is no multi-valued properties, but the 3 properties we are looking for are separated. For this image, the extension point will be specified as follows:</p> |
| <pre><extension |
| id="custom.circle2.svg" |
| name="Circle2" |
| point="org.eclipse.sirius.diagram.customBundledImageShape"> |
| <image |
| imagePath="/542678.design/images/circle2.svg" |
| label="custom.circle2"> |
| <colorIdentifier |
| colorIdentifier="circle"> |
| </colorIdentifier> |
| <colorAttribute |
| colorAttribute="fill"> |
| </colorAttribute> |
| <borderColorIdentifier |
| borderColorIdentifier="circle"> |
| </borderColorIdentifier> |
| <borderColorAttribute |
| borderColorAttribute="stroke"> |
| </borderColorAttribute> |
| <borderSizeIdentifier |
| borderSizeIdentifier="circle"> |
| </borderSizeIdentifier> |
| <borderSizeAttribute |
| borderSizeAttribute="stroke-width"> |
| </borderSizeAttribute> |
| </image> |
| </extension> |
| |
| </pre> |
| <p>This time, there is no subAttributeIdentifier, however colorAttribute, borderColorAttribute and borderSizeAttribute have different values.</p> |
| </body> |
| </html> |
