I followed the steps from the jointjs tutorial to create a custom element, which looks like this:
CustomRect = joint.dia.Element.define('example.CustomRect', {
attrs: {
rect: {
refX: 0,
refY: 0,
refWidth: '116',
refHeight: '70',
strokeWidth: 1,
stroke: '#000000',
fill: '#FFFFFF'
},
label: {
textAnchor: 'left',
refX: 10,
fill: 'black',
fontSize: 18,
text: 'text'
},
upperRect: {
strokeWidth: 1,
stroke: '#000000',
fill: 'rgba(255,0,0,0.3)',
cursor: 'pointer'
}
}
}, {
markup: [{
tagName: 'rect',
selector: 'rect'
},
{
tagName: 'text',
selector: 'label'
},
{
tagName: 'rect',
selector: 'upperRect'
}]
})
...
let customRect = new this.CustomRect()
customRect.attr({
upperRect: {
refWidth: '116',
refHeight: '10',
refX: 0,
refY: -11,
event: 'element:upperRect:pointerdown'
}
})
In addition, I attempted to include Ports using the Port API for joint.dia.Element as mentioned in the Port Tutorial:
customRect.addPorts([
{
args: {
y: 30
},
z: 0
}
]);
Although Ports were successfully added to my element, they lacked the expected functionality and appeared as inactive circles.
The approach outlined in the Port Tutorial did not yield desired results since I have not utilized joint.shapes.devs.Model for my custom element, fearing limitations in customization compared to joint.dia.Element (or so I believe).
Hence, I am seeking guidance on how to effectively integrate Ports into a custom element defined with joint.dia.Element while ensuring their proper functionality as demonstrated in the Port Tutorial.