Adding an icon to an element

[dmb0058]

Introduction

I've been overthinking this I think ...

I have a graph (boxes and lines) and I want to add a little traffic light to the "first" node in the graph.
I've done this by creating a custom shape that extends standard.Rectangle:

joint.shapes.standard.Rectangle.define('examples.FirstBlock', {},
        {   
            markup: [
                {   
                    tagName: 'rect',
                    selector: 'body',
                },  
                {   
                    tagName: 'text',
                    selector: 'label'
                },  
                {   
                    tagName: 'rect',
                    selector: 'backg',
                    attributes: {
                        'x': 143,
                        'y': 9,
                        'width': 14,
                        'height': 32,
                        'rx': 5,
                        'ry': 5,
                        'fill': 'black'
                    },
                },  
                {   
                    tagName: 'circle',
                    selector: 'redlight',
                    attributes: {
                        'cx': 150,
                        'cy': 15,
                        'r': 4, 
                        'fill': 'red',
                        'fill-opacity': 0.7
                    }
                },  
                {   
                    tagName: 'circle',
                    selector: 'yellowlight',
                    attributes: {
                        'cx': 150,
                        'cy': 25,
                        'r': 4, 
                        'fill': 'orange',
                        'fill-opacity': 0.7
                    }
                },  
                {   
                    tagName: 'circle',
                    selector: 'greenlight',
                    attributes: {
                        'cx': 150,
                        'cy': 35,
                        'r': 4, 
                        'fill': '#7fff3c'
                    }
                }
            ]
        }
    );

This works well, but I haven't figured out how to change the markup, e.g. how to take the traffic lights away if the entity that the rectangle represents changes. Maybe a static function that directly manipulates the markup?

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS

[dmb0058]

Solved :)

joint.shapes.standard.Rectangle.define('examples.Rectangle',
        {   
            attrs: {
                background: {
                    'x': 143,
                    'y': 9,
                    'width': 14,
                    'height': 32,
                    'rx': 5,
                    'ry': 5,
                    'fill': 'black'
                },
                redlight: {
                    'cx': 150,
                    'cy': 15,
                    'r': 5,
                    'fill': '#ff0000',
                    'fill-opacity': 0.5
                },
                orangelight: {
                    'cx': 150,
                    'cy': 25,
                    'r': 5,
                    'fill': '#f0e626',
                    'fill-opacity': 0.5
                },
                greenlight: {
                    'cx': 150,
                    'cy': 35,
                    'r': 5,
                    'fill': '#66ff00',
                    'fill-opacity': 0.5
                }
            }
        },
        {
            markup: [
                {
                    tagName: 'rect',
                    selector: 'body'
                },
                {
                    tagName: 'text',
                    selector: 'label'
                },
                {
                    tagName: 'rect',
                    selector: 'background'
                },
                {
                    tagName: 'circle',
                    selector: 'redlight'
                },
                {
                    tagName: 'circle',
                    selector: 'orangelight'
                },
                {
                    tagName: 'circle',
                    selector: 'greenlight'
                }
            ],
            setRedLight: function(){
                this.attr('redlight/fill-opacity', 1.0);
                this.attr('orangelight/fill-opacity', 0.5);
                this.attr('greenlight/fill-opacity', 0.5);
            },
            setOrangeLight: function(){
                this.attr('redlight/fill-opacity', 0.5);
                this.attr('orangelight/fill-opacity', 1.0);
                this.attr('greenlight/fill-opacity', 0.5);
            },
            setGreenLight: function(){
                this.attr('redlight/fill-opacity', 0.5);
                this.attr('orangelight/fill-opacity', 0.5);
                this.attr('greenlight/fill-opacity', 1.0);
            },
            setNoTraffic: function(){
                this.attr('background/opacity', 0.0);
                this.attr('redlight/opacity', 0.0);
                this.attr('orangelight/opacity', 0.0);
                this.attr('greenlight/opacity', 0.0);
            }
        }
    );

and then I can turn the traffic lights on and off, and set the color:

        this.shape = new joint.shapes.nocodebots.Rectangle({ ports:{ items:[ portOut ] } });
        if (this.block.start)
            this.shape.setGreenLight();
        else
            this.shape.setNoTraffic();

[kumilingus]

You might also check out this example: https://www.jointjs.com/demos/dynamic-status-icons

It is using a custom highlighter (specifically a custom list highlighter). The advantage of this solution is that you can add it to an arbitrary shape without modifying its markup.

[dmb0058]

This is very cool - probably what I should have done to start with :) I have a few other use cases that highlighters will work perfectly with, thanks!

…

On 15 Apr 2024, at 05:58, Roman Bruckner ***@***.***> wrote: You might also check out this example: https://www.jointjs.com/demos/dynamic-status-icons It is using a custom highlighter (specifically a custom list <https://resources.jointjs.com/docs/jointjs/v4.0/joint.html#highlighters.list> highlighter). The advantage of this solution is that you can add it to an arbitrary shape without modifying its markup. — Reply to this email directly, view it on GitHub <#2619 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABDXCQKFKGVBZLGU4FAX7YDY5NM5XAVCNFSM6AAAAABGGHIGZOVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TCMJTGQ2TQ>. You are receiving this because you modified the open/close state.