Skip to content

Commit 67f5ed4

Browse files
author
Dennis Labordus
authored
fix(iededitor): Refreshing components after update IED or DAI Element
1 parent 1cd6fb7 commit 67f5ed4

File tree

9 files changed

+265
-224
lines changed

9 files changed

+265
-224
lines changed

‎src/editors/IED.ts‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import '@material/mwc-list/mwc-list-item';
1313

1414
import './ied/ied-container.js';
1515
import './ied/element-path.js';
16-
import './substation/zeroline-pane.js';
1716

1817
import { translate } from 'lit-translate';
1918
import { SingleSelectedEvent } from '@material/mwc-list/mwc-list-foundation';
@@ -91,23 +90,25 @@ export default class IedPlugin extends LitElement {
9190
label="${translate('iededitor.searchHelper')}"
9291
@selected=${this.onSelect}
9392
>
94-
${iedList.map(
95-
ied =>
96-
html` <mwc-list-item
97-
?selected=${ied == this.selectedIed}
98-
value="${getNameAttribute(ied)}"
99-
>${getNameAttribute(ied)}
100-
${getDescriptionAttribute(ied)
101-
? translate('iededitor.searchHelperDesc', {
102-
description: getDescriptionAttribute(ied)!,
103-
})
104-
: ''}
105-
</mwc-list-item>`
106-
)}
93+
${iedList.map(ied => {
94+
const name = getNameAttribute(ied);
95+
const descr = getDescriptionAttribute(ied);
96+
return html` <mwc-list-item
97+
?selected=${ied == this.selectedIed}
98+
value="${name}"
99+
>${name}
100+
${descr
101+
? translate('iededitor.searchHelperDesc', {
102+
description: descr,
103+
})
104+
: ''}
105+
</mwc-list-item>`;
106+
})}
107107
</mwc-select>
108108
<element-path class="elementPath"></element-path>
109109
</div>
110110
<ied-container
111+
.doc=${this.doc}
111112
.element=${this.selectedIed}
112113
.nsdoc=${this.nsdoc}
113114
></ied-container>

‎src/editors/ied/access-point-container.ts‎

Lines changed: 15 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,17 @@
1-
import {
2-
css,
3-
customElement,
4-
html,
5-
property,
6-
TemplateResult,
7-
} from 'lit-element';
8-
9-
import '../../action-pane.js';
10-
import './server-container.js'
1+
import { css, customElement, html, TemplateResult } from 'lit-element';
112
import { nothing } from 'lit-html';
3+
124
import { getDescriptionAttribute, getNameAttribute } from '../../foundation.js';
13-
import { Nsdoc } from '../../foundation/nsdoc.js';
145
import { accessPointIcon } from '../../icons/ied-icons.js';
6+
7+
import '../../action-pane.js';
8+
import './server-container.js';
9+
1510
import { Container } from './foundation.js';
1611

1712
/** [[`IED`]] plugin subeditor for editing `AccessPoint` element. */
1813
@customElement('access-point-container')
1914
export class AccessPointContainer extends Container {
20-
@property()
21-
nsdoc!: Nsdoc;
22-
2315
private header(): TemplateResult {
2416
const name = getNameAttribute(this.element);
2517
const desc = getDescriptionAttribute(this.element);
@@ -30,12 +22,15 @@ export class AccessPointContainer extends Container {
3022
render(): TemplateResult {
3123
return html`<action-pane .label="${this.header()}">
3224
<mwc-icon slot="icon">${accessPointIcon}</mwc-icon>
33-
${Array.from(this.element.querySelectorAll(':scope > Server')).map(server =>
34-
html`<server-container
35-
.element=${server}
36-
.nsdoc=${this.nsdoc}
37-
.ancestors=${[...this.ancestors, this.element]}
38-
></server-container>`)}
25+
${Array.from(this.element.querySelectorAll(':scope > Server')).map(
26+
server =>
27+
html`<server-container
28+
.doc=${this.doc}
29+
.element=${server}
30+
.nsdoc=${this.nsdoc}
31+
.ancestors=${[...this.ancestors, this.element]}
32+
></server-container>`
33+
)}
3934
</action-pane>`;
4035
}
4136

‎src/editors/ied/da-container.ts‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import { IconButtonToggle } from '@material/mwc-icon-button-toggle';
1414

1515
import '../../action-pane.js';
1616
import { getNameAttribute, newWizardEvent } from '../../foundation.js';
17-
import { Nsdoc } from '../../foundation/nsdoc.js';
1817
import { wizards } from '../../wizards/wizard-library.js';
1918
import { DaiValidationTypes, getCustomField } from './foundation/foundation.js';
2019
import { createDaInfoWizard } from './da-wizard.js';
@@ -38,9 +37,6 @@ export class DAContainer extends Container {
3837
@property({ attribute: false })
3938
instanceElement!: Element;
4039

41-
@property()
42-
nsdoc!: Nsdoc;
43-
4440
@query('#toggleButton')
4541
toggleButton: IconButtonToggle | undefined;
4642

@@ -196,6 +192,7 @@ export class DAContainer extends Container {
196192
? this.getBDAElements().map(
197193
bdaElement =>
198194
html`<da-container
195+
.doc=${this.doc}
199196
.element=${bdaElement}
200197
.instanceElement=${getInstanceDAElement(
201198
this.instanceElement,

‎src/editors/ied/do-container.ts‎

Lines changed: 77 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,25 @@ import {
66
TemplateResult,
77
} from 'lit-element';
88
import { nothing } from 'lit-html';
9+
import { translate } from 'lit-translate';
910

1011
import '@material/mwc-icon-button-toggle';
1112
import { IconButtonToggle } from '@material/mwc-icon-button-toggle';
1213

1314
import '../../action-pane.js';
1415
import './da-container.js';
15-
import { getDescriptionAttribute, getNameAttribute, newWizardEvent } from '../../foundation.js';
16-
import { translate } from 'lit-translate';
17-
import { Nsdoc } from '../../foundation/nsdoc.js';
18-
import { createDoInfoWizard } from "./do-wizard.js";
19-
import { Container, findDOTypeElement, getInstanceDAElement } from "./foundation.js";
16+
17+
import {
18+
getDescriptionAttribute,
19+
getNameAttribute,
20+
newWizardEvent,
21+
} from '../../foundation.js';
22+
import { createDoInfoWizard } from './do-wizard.js';
23+
import {
24+
Container,
25+
findDOTypeElement,
26+
getInstanceDAElement,
27+
} from './foundation.js';
2028

2129
/** [[`IED`]] plugin subeditor for editing `DO` element. */
2230
@customElement('do-container')
@@ -27,9 +35,6 @@ export class DOContainer extends Container {
2735
@property({ attribute: false })
2836
instanceElement!: Element;
2937

30-
@property()
31-
nsdoc!: Nsdoc;
32-
3338
@query('#toggleButton') toggleButton: IconButtonToggle | undefined;
3439

3540
private header(): TemplateResult {
@@ -50,7 +55,7 @@ export class DOContainer extends Container {
5055
private getDOElements(): Element[] {
5156
const doType = findDOTypeElement(this.element);
5257
if (doType != null) {
53-
return Array.from(doType.querySelectorAll(':scope > SDO'))
58+
return Array.from(doType.querySelectorAll(':scope > SDO'));
5459
}
5560
return [];
5661
}
@@ -61,9 +66,11 @@ export class DOContainer extends Container {
6166
*/
6267
private getDAElements(): Element[] {
6368
const type = this.element.getAttribute('type') ?? undefined;
64-
const doType = this.element.closest('SCL')!.querySelector(`:root > DataTypeTemplates > DOType[id="${type}"]`);
69+
const doType = this.element
70+
.closest('SCL')!
71+
.querySelector(`:root > DataTypeTemplates > DOType[id="${type}"]`);
6572
if (doType != null) {
66-
return Array.from(doType!.querySelectorAll(':scope > DA'))
73+
return Array.from(doType!.querySelectorAll(':scope > DA'));
6774
}
6875
return [];
6976
}
@@ -76,7 +83,9 @@ export class DOContainer extends Container {
7683
private getInstanceDOElement(dO: Element): Element | null {
7784
const sdoName = getNameAttribute(dO);
7885
if (this.instanceElement) {
79-
return this.instanceElement.querySelector(`:scope > SDI[name="${sdoName}"]`)
86+
return this.instanceElement.querySelector(
87+
`:scope > SDI[name="${sdoName}"]`
88+
);
8089
}
8190
return null;
8291
}
@@ -85,39 +94,67 @@ export class DOContainer extends Container {
8594
const daElements = this.getDAElements();
8695
const doElements = this.getDOElements();
8796

88-
return html`<action-pane .label="${this.header()}" icon="${this.instanceElement != null ? 'done' : ''}">
97+
return html`<action-pane
98+
.label="${this.header()}"
99+
icon="${this.instanceElement != null ? 'done' : ''}"
100+
>
89101
<abbr slot="action">
90102
<mwc-icon-button
91103
title=${this.nsdoc.getDataDescription(this.element).label}
92104
icon="info"
93-
@click=${() => this.dispatchEvent(newWizardEvent(
94-
createDoInfoWizard(this.element, this.instanceElement, this.ancestors, this.nsdoc)))}
105+
@click=${() =>
106+
this.dispatchEvent(
107+
newWizardEvent(
108+
createDoInfoWizard(
109+
this.element,
110+
this.instanceElement,
111+
this.ancestors,
112+
this.nsdoc
113+
)
114+
)
115+
)}
95116
></mwc-icon-button>
96117
</abbr>
97-
${daElements.length > 0 || doElements.length > 0 ?
98-
html`<abbr slot="action" title="${translate('iededitor.toggleChildElements')}">
99-
<mwc-icon-button-toggle
100-
id="toggleButton"
101-
onIcon="keyboard_arrow_up"
102-
offIcon="keyboard_arrow_down"
103-
@click=${()=>this.requestUpdate()}
104-
></mwc-icon-button-toggle>
105-
</abbr>` : nothing}
106-
${this.toggleButton?.on ? daElements.map(daElement =>
107-
html`<da-container
108-
.element=${daElement}
109-
.instanceElement=${getInstanceDAElement(this.instanceElement, daElement)}
110-
.nsdoc=${this.nsdoc}
111-
.ancestors=${[...this.ancestors, this.element]}
112-
></da-container>`) : nothing}
113-
${this.toggleButton?.on ? doElements.map(doElement =>
114-
html`<do-container
115-
.element=${doElement}
116-
.instanceElement=${this.getInstanceDOElement(doElement)}
117-
.nsdoc=${this.nsdoc}
118-
.ancestors=${[...this.ancestors, this.element]}
119-
></do-container>`) : nothing}
120-
</action-pane>
121-
`;
118+
${daElements.length > 0 || doElements.length > 0
119+
? html`<abbr
120+
slot="action"
121+
title="${translate('iededitor.toggleChildElements')}"
122+
>
123+
<mwc-icon-button-toggle
124+
id="toggleButton"
125+
onIcon="keyboard_arrow_up"
126+
offIcon="keyboard_arrow_down"
127+
@click=${() => this.requestUpdate()}
128+
></mwc-icon-button-toggle>
129+
</abbr>`
130+
: nothing}
131+
${this.toggleButton?.on
132+
? daElements.map(
133+
daElement =>
134+
html`<da-container
135+
.doc=${this.doc}
136+
.element=${daElement}
137+
.instanceElement=${getInstanceDAElement(
138+
this.instanceElement,
139+
daElement
140+
)}
141+
.nsdoc=${this.nsdoc}
142+
.ancestors=${[...this.ancestors, this.element]}
143+
></da-container>`
144+
)
145+
: nothing}
146+
${this.toggleButton?.on
147+
? doElements.map(
148+
doElement =>
149+
html`<do-container
150+
.doc=${this.doc}
151+
.element=${doElement}
152+
.instanceElement=${this.getInstanceDOElement(doElement)}
153+
.nsdoc=${this.nsdoc}
154+
.ancestors=${[...this.ancestors, this.element]}
155+
></do-container>`
156+
)
157+
: nothing}
158+
</action-pane> `;
122159
}
123160
}

‎src/editors/ied/foundation.ts‎

Lines changed: 30 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,33 @@
1-
import { LitElement, property } from "lit-element";
2-
import { getInstanceAttribute, getNameAttribute } from "../../foundation.js";
1+
import { LitElement, property } from 'lit-element';
2+
3+
import { getInstanceAttribute, getNameAttribute } from '../../foundation.js';
4+
import { Nsdoc } from '../../foundation/nsdoc.js';
35

46
/** Base class for all containers inside the IED Editor. */
57
export class Container extends LitElement {
8+
@property()
9+
doc!: XMLDocument;
10+
611
@property({ attribute: false })
712
element!: Element;
813

14+
@property()
15+
nsdoc!: Nsdoc;
16+
917
@property()
1018
ancestors: Element[] = [];
1119

1220
constructor() {
1321
super();
1422

15-
this.addEventListener('focus', (event) => {
23+
this.addEventListener('focus', event => {
1624
event.stopPropagation();
17-
const pathOfAncestorNames = this.ancestors.map(ancestor => getTitleForElementPath(ancestor)!);
25+
const pathOfAncestorNames = this.ancestors.map(
26+
ancestor => getTitleForElementPath(ancestor)!
27+
);
1828
pathOfAncestorNames.push(getTitleForElementPath(this.element)!);
1929

20-
this.dispatchEvent(
21-
newFullElementPathEvent(
22-
pathOfAncestorNames
23-
)
24-
);
30+
this.dispatchEvent(newFullElementPathEvent(pathOfAncestorNames));
2531
});
2632

2733
this.addEventListener('blur', () => {
@@ -40,9 +46,11 @@ export class Container extends LitElement {
4046
* @param tagName - The Tag-name of the element to search for.
4147
* @returns The found element with the tag-name or null if not found.
4248
*/
43-
export function findElement(ancestors: Element[], tagName: string): Element | null {
44-
return ancestors
45-
.find(element => element.tagName === tagName) ?? null;
49+
export function findElement(
50+
ancestors: Element[],
51+
tagName: string
52+
): Element | null {
53+
return ancestors.find(element => element.tagName === tagName) ?? null;
4654
}
4755

4856
/**
@@ -66,7 +74,9 @@ export function findLogicaNodeElement(ancestors: Element[]): Element | null {
6674
export function findDOTypeElement(element: Element | null): Element | null {
6775
if (element && element.hasAttribute('type')) {
6876
const type = element.getAttribute('type');
69-
return element.closest('SCL')!.querySelector(`:root > DataTypeTemplates > DOType[id="${type}"]`);
77+
return element
78+
.closest('SCL')!
79+
.querySelector(`:root > DataTypeTemplates > DOType[id="${type}"]`);
7080
}
7181
return null;
7282
}
@@ -77,14 +87,17 @@ export function findDOTypeElement(element: Element | null): Element | null {
7787
* @param da - The (B)DA object to search with.
7888
* @returns The optional SDI / DAI element.
7989
*/
80-
export function getInstanceDAElement(parentInstance: Element | null, da: Element): Element | null {
90+
export function getInstanceDAElement(
91+
parentInstance: Element | null,
92+
da: Element
93+
): Element | null {
8194
if (parentInstance) {
8295
const daName = getNameAttribute(da);
8396
const bType = da.getAttribute('bType');
8497
if (bType == 'Struct') {
85-
return parentInstance.querySelector(`:scope > SDI[name="${daName}"]`)
98+
return parentInstance.querySelector(`:scope > SDI[name="${daName}"]`);
8699
}
87-
return parentInstance.querySelector(`:scope > DAI[name="${daName}"]`)
100+
return parentInstance.querySelector(`:scope > DAI[name="${daName}"]`);
88101
}
89102
return null;
90103
}
@@ -96,7 +109,7 @@ export function getTitleForElementPath(element: Element): string {
96109
return element.getAttribute('lnClass')!;
97110
}
98111
case 'LDevice': {
99-
return (getNameAttribute(element) ?? getInstanceAttribute(element))!
112+
return (getNameAttribute(element) ?? getInstanceAttribute(element))!;
100113
}
101114
case 'Server': {
102115
return 'Server';

0 commit comments

Comments
 (0)