I have a question regarding changing my port properties.

[james-ep01]

Introduction

I have a question regarding changing my port properties.

I have my own port properties in json as below.
This is my property in portbody.

markup: [ {  tagName: "circle", selector: "portBody" }, { tagName: "text",  selector: "portLabel" } ],
			  group: "InputUpperPorts",
			  attrs: {
				portLabel: { 
					text: `${digit.lab}` , fill: '#989999',
					textAnchor: "middle", textVerticalAnchor: "middle",
					pointerEvents: "none",   fontSize: 12
				  },
				portBody: { 
					**my:jsonStr,**
 					r:12, 
					fill: bodyFillColor , stroke: bodyStrokeColor , strokeWidth: 2,
					magnet: "active", cursor: "grab"
	   },
     },
 args: { x: xx , y:yy   }

And I fill in the settings values ​​in these fields. I tried both of the following methods.
1: Change to portPorp
2: Change to direct access

let portMyInfo    = my_port.attrs.portBody.my; 
let my_jsonData   = JSON.parse(portMyInfo); 
// set my property
my_jsonData.in_s  = ........
.........................................

//1. Change using portPorp
element.portProp( my_port.id , 'attrs/portBody/my', JSON.stringify(my_jsonData) ); 
// 2. Change direct access
my_port.attrs.portBody.my = JSON.stringify(my_jsonData);

There are two things I want to know.

First question, after changing to direct access in 2, the rendering is not done, so the changed port value in validateConnection of paper is not reflected. Is it because the rendering is not done? So how do I render the port information after changing directly in 2?

Second question, if you change to method 1 using portPorp, i can get the changed port value in validateConnection and track the user's error. However, a strange bug occurs.
The port hover effect stops in the stroked state and a large port is drawn on the paper. There is no code that changed the stroke. I'm uploading the video below. What is the problem?
After this bug occurred, even when I printed the fill color of portBody to the console, the color did not change.

2025-02-27.165146.mp4

Steps to reproduce

No response

Restrictions & Constraints

No response

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

JointJS, JointJS+

[zbynekstara]

Hi james-ep01,

The portProp() method should be the way to go (option 1). Directly changing attrs is not best practice.

I do not completely understand why you are placing the my property on the attrs/portBody. This would be valid if it were a visual attribute on the subelement, but it sounds more like you are saving custom data. However, custom data can be saved on the element directly (e.g. element.portProp( my_port.id , 'my', JSON.stringify(my_jsonData));).

When it comes to the port highlighting issue, my first question is - did you refer to the example in the Ports documentation (https://docs.jointjs.com/learn/features/shapes/elements/ports/#marking-available-magnets)? I am not exactly clear about what you mean about "tracking the user's error" in this context, but is it possible that there is an unhandled error inside your validateConnection() code? That could conceivably cause the highlighting method to break and stay on (as seen in the video).

Can you provide a minimal reproducible example of your code which shows these two issues in action?

[james-ep01]

The reason I place my property in portBody is to use magnetS, magnetT arguments in validateConnection.
When the port is connected, I set up various port values ​​in my property my and use the changed values ​​of magnetS, magnetT to show whether the connection is made and an error message in validateConnection.
The picture below shows the values ​​of magnetS, magnetT. Since it comes in as xml only as portBody, I put my property in portBody and have it as json data because there are many values. If I put it in a place other than portBody under the attr of port, magnetS, magnetT values ​​will not come in, so I put it in portBody.

Below is the part of my validateConnection code that uses the my property. If I use my_port.attrs.portBody.my = JSON.stringify(my_jsonData);, the screen error will not occur, but the changed values ​​of magnetS, magnetT will not come in.
However, element.portProp( my_port.id , 'attrs/portBody/my', JSON.stringify(my_jsonData) ); When I change the my property using , the value comes in but the screen behaves strangely.

validateConnection: function( cellViewS, magnetS, cellViewT, magnetT, end , linkView ) {	
	.............
	let magnetTjsonObj = magnetT.getAttribute('my'); // target
	let magnetSjsonObj = magnetS.getAttribute('my'); // start

	let magnetTjsonData;
	let magnetSjsonData; 
	if( magnetTjsonObj ){ magnetTjsonData = JSON.parse(magnetTjsonObj);  } 
	if( magnetSjsonObj ){ magnetSjsonData = JSON.parse(magnetSjsonObj); } 
	 
	if( magnetT && magnetTjsonData ){  
		if ( magnetT && magnetTjsonData 
			&& magnetTjsonData.dir   ){
			 ...........
		}  
	}
	if ( cellViewT ) {
		if( cellViewT.model.attributes.partId
			 && cellViewT.model.attributes.partId.indexOf('termin...') >= 0 ){
			if( magnetTjsonData && magnetTjsonData.in_v  ................
		}
	}
	.............

[kumilingus]

Always use setters (set(), prop(), portProp()) to set the model data. No exceptions.

Set port data:

element.portProp(portId, 'myData', { a: 1, b: 1 });

Read port data:

const portId  = cellViewS.findAttribute('port', magnetS);
const port = cellViewS.model.getPort(portId);
console.log(port.myData); // { a: 1, b: 1 }

If your code contains any errors, please provide us with a CodePen demonstrating the issue.