Skip to content

Commit 14c0c35

Browse files
romina1601romina1601
committed
EBR-106. Fix enum dialog not working
1 parent 56dd18d commit 14c0c35

File tree

3 files changed

+57
-21
lines changed

3 files changed

+57
-21
lines changed

‎src/components/link/CustomLinkFactory.tsx

+22-6
Original file line numberDiff line numberDiff line change
@@ -44,18 +44,34 @@ namespace S {
4444
`;
4545
}
4646

47+
function escapeSelector(selector) {
48+
return selector.replace(/([!"#$%&'()*+,.\/:;<=>?@[\\\]^`{|}~])/g, '\\$1');
49+
}
50+
4751
function addHover(model: TriangleLinkModel | ParameterLinkModel){
4852
return (() => {
49-
document.querySelector(`div.port[data-nodeid='${model.getSourcePort().getNode().getID()}'][data-name='${model.getSourcePort().getName()}']>div>div`)?.classList?.add("hover");
50-
document.querySelector(`div.port[data-nodeid="${model.getTargetPort().getNode().getID()}"][data-name='${model.getTargetPort().getName()}']>div>div`)?.classList?.add("hover");
51-
});
53+
const sourceNodeId = model.getSourcePort().getNode().getID();
54+
const sourcePortName = escapeSelector(model.getSourcePort().getName());
55+
56+
const targetNodeId = model.getTargetPort().getNode().getID();
57+
const targetPortName = escapeSelector(model.getTargetPort().getName());
58+
59+
document.querySelector(`div.port[data-nodeid='${sourceNodeId}'][data-name='${sourcePortName}']>div>div`)?.classList?.add("hover");
60+
document.querySelector(`div.port[data-nodeid="${targetNodeId}"][data-name='${targetPortName}']>div>div`)?.classList?.add("hover");
61+
});
5262
}
5363

5464
function removeHover(model: TriangleLinkModel | ParameterLinkModel){
5565
return () => {
56-
document.querySelector(`div.port[data-nodeid='${model.getSourcePort().getNode().getID()}'][data-name='${model.getSourcePort().getName()}']>div>div`)?.classList?.remove("hover");
57-
document.querySelector(`div.port[data-nodeid="${model.getTargetPort().getNode().getID()}"][data-name='${model.getTargetPort().getName()}']>div>div`)?.classList?.remove("hover");
58-
}
66+
const sourceNodeId = model.getSourcePort().getNode().getID();
67+
const sourcePortName = escapeSelector(model.getSourcePort().getName());
68+
69+
const targetNodeId = model.getTargetPort().getNode().getID();
70+
const targetPortName = escapeSelector(model.getTargetPort().getName());
71+
72+
document.querySelector(`div.port[data-nodeid='${sourceNodeId}'][data-name='${sourcePortName}']>div>div`)?.classList?.remove("hover");
73+
document.querySelector(`div.port[data-nodeid="${targetNodeId}"][data-name='${targetPortName}']>div>div`)?.classList?.remove("hover");
74+
}
5975
}
6076

6177
class SelectOnClickLinkWidget extends DefaultLinkWidget {

‎src/components/port/CustomPortLabel.tsx

+35-13
Original file line numberDiff line numberDiff line change
@@ -245,24 +245,37 @@ export class CustomPortLabel extends React.Component<CustomPortLabelProps> {
245245
{symbolLabel}
246246
</S.Symbol>
247247
</S.SymbolContainer>);
248-
248+
249249
const nodeType = this.props.node.getOptions().name
250250

251+
function escapeSelector(selector: string): string {
252+
return selector.replace(/([!"#$%&'()*+,.\/:;<=>?@[\\\]^`{|}~])/g, '\\$1');
253+
}
254+
251255
function addHover(port: DefaultPortModel) {
252256
return (() => {
253257
for (let linksKey in port.getLinks()) {
254258
document.querySelector(`g[data-linkid='${linksKey}']`)?.classList.add("hover");
255259
const model = port.getLinks()[linksKey]
256-
if(model.getSourcePort() != null)
257-
document.querySelector(`div.port[data-nodeid="${model.getSourcePort().getNode().getID()}"][data-name='${model.getSourcePort().getName()}']>div>div`)?.classList.add("hover");
258-
if(model.getTargetPort() != null)
259-
document.querySelector(`div.port[data-nodeid="${model.getTargetPort().getNode().getID()}"][data-name='${model.getTargetPort().getName()}']>div>div`)?.classList.add("hover");
260+
if(model.getSourcePort() != null) {
261+
const sourceNodeId = model.getSourcePort().getNode().getID();
262+
const sourcePortName = escapeSelector(model.getSourcePort().getName());
263+
document.querySelector(`div.port[data-nodeid="${sourceNodeId}"][data-name='${sourcePortName}']>div>div`)?.classList.add("hover");
264+
}
265+
if(model.getTargetPort() != null) {
266+
const targetNodeId = model.getTargetPort().getNode().getID();
267+
const targetPortName = escapeSelector(model.getTargetPort().getName());
268+
document.querySelector(`div.port[data-nodeid="${targetNodeId}"][data-name='${targetPortName}']>div>div`)?.classList.add("hover");
269+
}
260270
if(attachedColor != null){
261271
if(model.getSourcePort() != null){
262272
Object.values(model.getSourcePort().getNode().getPorts()).forEach(p => {
263273
Object.values(p.getLinks()).forEach(l => {
264-
if(model.getTargetPort() != null)
265-
document.querySelector(`div.port[data-nodeid="${l.getTargetPort().getNode().getID()}"][data-name='${l.getTargetPort().getName()}']>div>div`)?.classList.add("hover");
274+
if(model.getTargetPort() != null) {
275+
const linkedTargetNodeId = l.getTargetPort().getNode().getID();
276+
const linkedTargetPortName = escapeSelector(l.getTargetPort().getName());
277+
document.querySelector(`div.port[data-nodeid="${linkedTargetNodeId}"][data-name='${linkedTargetPortName}']>div>div`)?.classList.add("hover");
278+
}
266279
})
267280
})
268281
}
@@ -276,16 +289,25 @@ export class CustomPortLabel extends React.Component<CustomPortLabelProps> {
276289
for (let linksKey in port.getLinks()) {
277290
document.querySelector(`g[data-linkid='${linksKey}']`)?.classList.remove("hover");
278291
const model = port.getLinks()[linksKey]
279-
if(model.getSourcePort() != null)
280-
document.querySelector(`div.port[data-nodeid="${model.getSourcePort().getNode().getID()}"][data-name='${model.getSourcePort().getName()}']>div>div`)?.classList.remove("hover");
281-
if(model.getTargetPort() != null)
282-
document.querySelector(`div.port[data-nodeid="${model.getTargetPort().getNode().getID()}"][data-name='${model.getTargetPort().getName()}']>div>div`)?.classList.remove("hover");
292+
if(model.getSourcePort() != null) {
293+
const sourceNodeId = model.getSourcePort().getNode().getID();
294+
const sourcePortName = escapeSelector(model.getSourcePort().getName());
295+
document.querySelector(`div.port[data-nodeid="${sourceNodeId}"][data-name='${sourcePortName}']>div>div`)?.classList.remove("hover");
296+
}
297+
if(model.getTargetPort() != null) {
298+
const targetNodeId = model.getTargetPort().getNode().getID();
299+
const targetPortName = escapeSelector(model.getTargetPort().getName());
300+
document.querySelector(`div.port[data-nodeid="${targetNodeId}"][data-name='${targetPortName}']>div>div`)?.classList.remove("hover");
301+
}
283302
if(attachedColor != null){
284303
if(model.getSourcePort() != null){
285304
Object.values(model.getSourcePort().getNode().getPorts()).forEach(p => {
286305
Object.values(p.getLinks()).forEach(l => {
287-
if(model.getTargetPort() != null)
288-
document.querySelector(`div.port[data-nodeid="${l.getTargetPort().getNode().getID()}"][data-name='${l.getTargetPort().getName()}']>div>div`)?.classList.remove("hover");
306+
if(model.getTargetPort() != null) {
307+
const linkedTargetNodeId = l.getTargetPort().getNode().getID();
308+
const linkedTargetPortName = escapeSelector(l.getTargetPort().getName());
309+
document.querySelector(`div.port[data-nodeid="${linkedTargetNodeId}"][data-name='${linkedTargetPortName}']>div>div`)?.classList.remove("hover");
310+
}
289311
})
290312
})
291313
}

‎src/dialog/input-dialogues/EnumInput.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import Dropdown from '../../components/common/Dropdown';
44
export const EnumInput = ({ title, possibleValues }): JSX.Element => {
55

66
return (
7-
<form>
87
<div
98
style={{
109
paddingLeft: 5,
@@ -15,6 +14,5 @@ export const EnumInput = ({ title, possibleValues }): JSX.Element => {
1514
>
1615
<Dropdown name={title} types={possibleValues} />
1716
</div>
18-
</form>
1917
);
2018
};

0 commit comments

Comments
 (0)