How to add an image to an element as a decorator?

Question

Imagine that I have a Rect element and want to decorate it with a small (say, 16x16) PNG image in the upper left corner. I cannot determine how to achieve this. I studied the documents, but still could not find a sample or a link to how to achieve this goal. Does anyone have a recipe or sample pointer that they would like to share to help me achieve my goal?

Answer 1

It is better to create your own shape, which has a rectangle, image and text. This gives you great flexibility, and you do not need to have two elements to express one form. Your shape, decorated with a small image in the upper left corner, might look like this:

joint.shapes.basic.DecoratedRect = joint.shapes.basic.Generic.extend({ markup: '<g class="rotatable"><g class="scalable"><rect/></g><image/><text/></g>', defaults: joint.util.deepSupplement({ type: 'basic.DecoratedRect', size: { width: 100, height: 60 }, attrs: { 'rect': { fill: '#FFFFFF', stroke: 'black', width: 100, height: 60 }, 'text': { 'font-size': 14, text: '', 'ref-x': .5, 'ref-y': .5, ref: 'rect', 'y-alignment': 'middle', 'x-alignment': 'middle', fill: 'black' }, 'image': { 'ref-x': 2, 'ref-y': 2, ref: 'rect', width: 16, height: 16 } } }, joint.shapes.basic.Generic.prototype.defaults) }); 

And you can use it like this on your charts:

 var decoratedRect = new joint.shapes.basic.DecoratedRect({ position: { x: 150, y: 80 }, size: { width: 100, height: 60 }, attrs: { text: { text: 'My Element' }, image: { 'xlink:href': 'http://placehold.it/16x16' } } }); graph.addCell(decoratedRect); 

Notice how the form is indicated, the important bits are the markup , type and attrs objects that reference SVG elements in the markup using regular CSS selectors (there are only tags here, but you can use classes if you want). For the image tag, we use special JointJS attributes for relative positioning ( ref , ref-x and ref-y ). With these attributes, we position the image relative to the upper left corner of the rect element, and we move it 2px from the top edge ( ref-y ) and 2px from the left edge ( ref-x ).

One note. It is important that the type ('basic.DecoratedRect') attribute matches the namespace in which the form is defined in ( joint.shapes.basic.DecoratedRect ). This is because when JointJS rebuilds the graphs from JSON, it looks at the type attribute and does a simple search in the joint.shapes namespace to see if a form specific to this type exists.

Answer 2

We can create an element type for an image using the following recipe:

 var image = new joint.shapes.basic.Image({ position : { x : 100, y : 100 }, size : { width : 16, height : 16 }, attrs : { image : { "xlink:href" : "images/myImage.png", width : 16, height : 16 } } }); graph.addCell(image); 

This position will position the image at x = 100, y = 100. It is important that the width / height of the size corresponds to the width / height of the attrs / image and be the width / height of the image itself.

Although this does not decorate the previous element, it can be located above the previous element, achieving the desired effect.