org.eclipse.sirius.diagram.customBundledImageShape. In this extension, there are three required fields:
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.
As examples, we will use the sample provided in this feature corresponding bugzilla
circle.svg defines a ring figure thanks to the following ellipse tag:
<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" />
For this file, the extension point is specified as follows:
<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>
The three properties are defined in a single tag. In the extension point each, colorIdentifier, borderColorIdentifier and borderSizeIdentifier have the same identifier: “circle4”.
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”.
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.
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:
<circle id="circle" cx="250" cy="250" r="210" fill="#fff" stroke="#000" stroke-width="8"/>
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:
<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>
This time, there is no subAttributeIdentifier, however colorAttribute, borderColorAttribute and borderSizeAttribute have different values.