I have a question regarding changing my port properties. #2892
Unanswered
james-ep01
asked this question in
Q&A
Replies: 2 comments 5 replies
-
|
Hi james-ep01, The I do not completely understand why you are placing the 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 Can you provide a minimal reproducible example of your code which shows these two issues in action? |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
The reason I place my property in portBody is to use magnetS, magnetT arguments in validateConnection.
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. |
Beta Was this translation helpful? Give feedback.
-
|
Always use setters ( 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. |
Beta Was this translation helpful? Give feedback.
4 replies
-
|
If you make something weird or have a wrong code, please let me know. The current code is too complicated and has too much content, so I made a code that reproduces the error similarly. I tested it here and there, but if I put something in portBody, the highlight looks weird, and an error occurs in the code that uses another port. And in the question above, I said that I put it in portBody. If I make it simple and test it, the same symptom seems to occur.. Do you test it when a user asks a question? But I don't know much about JavaScript. I only know a little about various programming languages. I wasted about a week trying to solve this problem. Because my app is not simple and complex. Now I'm using it by removing the attribute from portBody and modifying it overall, but the highlight of the port looks a little weird and unstable than before I put something in the port. But I don't know if it's caused by the highlight or an event related to hover. If you don't put it in portBody, this port highlight won't break. But why did I put it in portBody? No matter how much I searched, I couldn't find any documentation on how to set the settings in cellViewS and cellViewT of validateConnection and get the values in real time. The only way I could do it was to print arguments to the console log in validateConnection, so portBody came out as dom xml in cellViewS and cellViewT, so I put it in portBody and used it. I think that using a function or class created by someone else is the basics of a program, seeing what the arguments are and seeing what it returns. Below is a simple code I made for testing. Don't connect to the port, just drag it to test it, and check if the port highlight stays on top (bug), and if the highlight stays on top (bug), an error occurs when you try to reuse the port information. Please let me know where the problem is in the code. |
Beta Was this translation helpful? Give feedback.
-
|
It's a bug. The highlighter is not removed when you made a change to the port from the Moving the logic to paper.on('link:connect', function(linkView, evt, cellView, magnet, arrowhead) {
const link = linkView.model;
const SourceE = linkView.sourceView.model;
const TargetE = linkView.targetView.model;
let s_port = SourceE.getPort( link.source().port );
let t_port = TargetE.getPort( link.target().port );
if( s_port && t_port ){
let s_port_My = SourceE.portProp( s_port.id , 'attrs/portBody/my' );
let s_port_MyData = JSON.parse(s_port_My);
let t_port_My = TargetE.portProp( t_port.id , 'attrs/portBody/my' );
let t_port_MyData = JSON.parse(t_port_My);
console.log('s_port_MyData', s_port_MyData );
console.log('t_port_MyData', t_port_MyData );
// change my values.
s_port_MyData.name='한진석';
s_port_MyData.ename='제임스H';
s_port_MyData.from='Korea';
// SourceE.portProp( s_port.id , 'attrs/portBody/my', JSON.stringify(s_port_MyData) );
// change my values.
t_port_MyData.name='HAN';
t_port_MyData.ename='james';
t_port_MyData.from='United States';
// TargetE.portProp( t_port.id , 'attrs/portBody/my', JSON.stringify(t_port_MyData) );
if (window.xxx === undefined) {
window.xxx = 0;
}
TargetE.portProp(t_port.id, 'test', window.xxx++);
}
}); |
Beta Was this translation helpful? Give feedback.
-
|
Of course, link:connect and disconnect are also applied and used. I also know that link:connect and disconnect occur when a link is completely connected or disconnected. The reason I am asking is not to completely disconnect or connect, or to process the event that is issued when only the target is moved with the mouse and changed. That is why change:source and change:target detect the change. I hope the bug is patched in ASAS. |
Beta Was this translation helpful? Give feedback.
-
|
You should be able to patch it with the following code. Needs to be run just once. joint.dia.HighlighterView.prototype.findNode = function(cellView, nodeSelector = null){
let el;
if (typeof nodeSelector === 'string') {
el = cellView.findNode(nodeSelector);
} else if (joint.util.isPlainObject(nodeSelector)) {
const isLink = cellView.model.isLink();
const { label = null, port, selector } = nodeSelector;
if (isLink && label !== null) {
// Link Label Selector
el = cellView.findLabelNode(label, selector);
} else if (!isLink && port) {
// Element Port Selector
el = cellView.findPortNode(port, selector);
} else {
// Cell Selector
el = cellView.findNode(selector);
}
} else if (nodeSelector) {
el = V.toNode(nodeSelector);
if (!(el instanceof SVGElement) || !cellView.el.contains(el)) el = null;
}
return el ? el : null;
}We will include the patch in the next release. |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
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.
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
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+
Beta Was this translation helpful? Give feedback.
All reactions