Skip to content

Commit b88bd93

Browse files
JakobVogelsangJakobVogelsang
committed
refactor: scope publisher plugin
1 parent 5a7a9dc commit b88bd93

29 files changed

+307
-319
lines changed

‎editors/base-element-editor.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1+
/* eslint-disable import/no-extraneous-dependencies */
12
import { LitElement, TemplateResult, html } from 'lit';
23
import { property, query, state } from 'lit/decorators.js';
34

4-
// import '@scopedelement/material-web/iconbutton/icon-button.js';
5+
import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
6+
57
import { MdDialog } from '@scopedelement/material-web/dialog/MdDialog.js';
68
import type { MdIconButton } from '@scopedelement/material-web/iconbutton/MdIconButton.js';
79

@@ -13,9 +15,7 @@ import {
1315
} from '@openenergytools/scl-lib';
1416
import '@openenergytools/filterable-lists/dist/action-list.js';
1517

16-
import './dataset/data-set-element-editor.js';
17-
18-
export default class BaseElementEditor extends LitElement {
18+
export class BaseElementEditor extends ScopedElementsMixin(LitElement) {
1919
/** The document being edited as provided to plugins by [[`OpenSCD`]]. */
2020
@property({ attribute: false })
2121
doc!: XMLDocument;

‎editors/dataset/data-set-editor.spec.ts

+2-8
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,16 @@ import { sendMouse } from '@web/test-runner-commands';
66

77
import { SinonSpy, spy } from 'sinon';
88

9-
import { SclTextField } from '@openenergytools/scl-text-field';
10-
import { MdIconButton } from '@scopedelement/material-web/iconbutton/MdIconButton.js';
11-
import { MdIcon } from '@scopedelement/material-web/icon/MdIcon.js';
12-
139
import {
1410
isInsert,
1511
isRemove,
1612
} from '@openenergytools/scl-lib/dist/foundation/utils.js';
1713

1814
import { dataSetDoc } from './data-set-editor.testfiles.js';
1915

20-
import './data-set-editor.js';
16+
import { DataSetEditor } from './data-set-editor.js';
2117

22-
window.customElements.define('scl-text-field', SclTextField);
23-
window.customElements.define('md-icon-button', MdIconButton);
24-
window.customElements.define('md-icon', MdIcon);
18+
window.customElements.define('data-set-editor', DataSetEditor);
2519

2620
const doc = new DOMParser().parseFromString(dataSetDoc, 'application/xml');
2721

‎editors/dataset/data-set-editor.test.ts

+3-24
Original file line numberDiff line numberDiff line change
@@ -5,32 +5,11 @@ import { sendKeys, sendMouse, setViewport } from '@web/test-runner-commands';
55

66
import { visualDiff } from '@web/test-runner-visual-regression';
77

8-
import { MdDialog } from '@scopedelement/material-web/dialog/MdDialog.js';
9-
import { MdOutlinedButton } from '@scopedelement/material-web/button/MdOutlinedButton.js';
10-
import { MdTextButton } from '@scopedelement/material-web/button/MdTextButton.js';
11-
import { MdIconButton } from '@scopedelement/material-web/iconbutton/MdIconButton.js';
12-
import { SclTextField } from '@openenergytools/scl-text-field';
13-
import { MdIcon } from '@scopedelement/material-web/icon/MdIcon.js';
14-
import { SclSelect } from '@openenergytools/scl-select';
15-
import { SclCheckbox } from '@openenergytools/scl-checkbox';
16-
import { MdCheckbox } from '@scopedelement/material-web/checkbox/MdCheckbox.js';
17-
import { TreeGrid } from '@openenergytools/tree-grid';
18-
198
import { dataSetDoc, otherDataSetDoc } from './data-set-editor.testfiles.js';
209

21-
import './data-set-editor.js';
22-
import type { DataSetEditor } from './data-set-editor.js';
23-
24-
window.customElements.define('md-dialog', MdDialog);
25-
window.customElements.define('md-outlined-button', MdOutlinedButton);
26-
window.customElements.define('md-text-button', MdTextButton);
27-
window.customElements.define('scl-text-field', SclTextField);
28-
window.customElements.define('md-icon-button', MdIconButton);
29-
window.customElements.define('md-icon', MdIcon);
30-
window.customElements.define('scl-select', SclSelect);
31-
window.customElements.define('scl-checkbox', SclCheckbox);
32-
window.customElements.define('md-checkbox', MdCheckbox);
33-
window.customElements.define('oscd-tree-grid', TreeGrid);
10+
import { DataSetEditor } from './data-set-editor.js';
11+
12+
window.customElements.define('data-set-editor', DataSetEditor);
3413

3514
const factor = window.process && process.env.CI ? 4 : 2;
3615
function timeout(ms: number) {

‎editors/dataset/data-set-editor.ts

+16-19
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
/* eslint-disable import/no-extraneous-dependencies */
22
import { css, html, LitElement, TemplateResult } from 'lit';
3-
import { customElement, property, query, state } from 'lit/decorators.js';
3+
import { property, query, state } from 'lit/decorators.js';
44

5+
import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
6+
7+
import {
8+
ActionItem,
9+
ActionList,
10+
} from '@openenergytools/filterable-lists/dist/ActionList.js';
511
import { MdOutlinedButton } from '@scopedelement/material-web/button/MdOutlinedButton.js';
612

713
import { newEditEvent } from '@openenergytools/open-scd-core';
@@ -10,23 +16,18 @@ import {
1016
identity,
1117
removeDataSet,
1218
} from '@openenergytools/scl-lib';
13-
import '@openenergytools/filterable-lists/dist/action-list.js';
14-
import type {
15-
ActionItem,
16-
ActionList,
17-
} from '@openenergytools/filterable-lists/dist/ActionList.js';
1819

19-
import './data-set-element-editor.js';
20-
import type { DataSetElementEditor } from './data-set-element-editor.js';
20+
import { DataSetElementEditor } from './data-set-element-editor.js';
2121

22-
import {
23-
pathIdentity,
24-
styles,
25-
// updateElementReference,
26-
} from '../../foundation.js';
22+
import { pathIdentity, styles } from '../../foundation.js';
23+
24+
export class DataSetEditor extends ScopedElementsMixin(LitElement) {
25+
static scopedElements = {
26+
'action-list': ActionList,
27+
'data-set-element-editor': DataSetElementEditor,
28+
'md-outlined-button': MdOutlinedButton,
29+
};
2730

28-
@customElement('data-set-editor')
29-
export class DataSetEditor extends LitElement {
3031
/** The document being edited as provided to plugins by [[`OpenSCD`]]. */
3132
@property({ attribute: false })
3233
doc!: XMLDocument;
@@ -171,9 +172,5 @@ export class DataSetEditor extends LitElement {
171172
md-icon-button[icon='playlist_add'] {
172173
pointer-events: all;
173174
}
174-
175-
mwc-list-item {
176-
--mdc-list-item-meta-size: 48px;
177-
}
178175
`;
179176
}

‎editors/dataset/data-set-element-editor.spec.ts

+12-13
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,11 @@ import {
1010
isRemove,
1111
} from '@openenergytools/scl-lib/dist/foundation/utils.js';
1212

13-
import { MdDialog } from '@scopedelement/material-web/dialog/MdDialog.js';
14-
import { SclTextField } from '@openenergytools/scl-text-field';
15-
1613
import { dataSetDoc } from './data-set-editor.testfiles.js';
1714

18-
import './data-set-element-editor.js';
19-
import type { DataSetElementEditor } from './data-set-element-editor.js';
15+
import { DataSetElementEditor } from './data-set-element-editor.js';
2016

21-
window.customElements.define('md-dialog', MdDialog);
22-
window.customElements.define('scl-text-field', SclTextField);
17+
window.customElements.define('data-set-element-editor', DataSetElementEditor);
2318

2419
const doc = new DOMParser().parseFromString(dataSetDoc, 'application/xml');
2520
const dataSet = doc.querySelector('LDevice[inst="ldInst1"] DataSet')!;
@@ -48,6 +43,8 @@ describe('DataSet element editor', () => {
4843

4944
it('allows to change DataSets name attribute', async () => {
5045
editor.inputs[0].value = 'SomeDataSetName';
46+
editor.onInputChange();
47+
await timeout(50);
5148

5249
await editor.saveButton.click();
5350

@@ -61,6 +58,8 @@ describe('DataSet element editor', () => {
6158
it('allows to change DataSets desc attribute', async () => {
6259
editor.inputs[1].nullSwitch?.click();
6360
editor.inputs[1].value = 'SomeNewDesc';
61+
editor.onInputChange();
62+
await timeout(50);
6463

6564
await editor.saveButton.click();
6665

@@ -80,9 +79,9 @@ describe('DataSet element editor', () => {
8079

8180
it('allows to move FCDA child one step up', async () => {
8281
await setViewport({ width: 800, height: 1200 });
83-
await sendMouse({ type: 'click', position: [740, 600] }); // open menu
84-
await timeout(200); // await menu to be opened
85-
await sendMouse({ type: 'click', position: [740, 680] }); // click on move up
82+
await sendMouse({ type: 'click', position: [740, 650] }); // open menu
83+
await timeout(500); // await menu to be opened
84+
await sendMouse({ type: 'click', position: [740, 700] }); // click on move up
8685

8786
const toBeMovedFCDA = dataSet.querySelectorAll(':scope > FCDA')[1];
8887
const reference = toBeMovedFCDA.previousElementSibling;
@@ -99,9 +98,9 @@ describe('DataSet element editor', () => {
9998

10099
it('allows to move FCDA child one step down', async () => {
101100
await setViewport({ width: 800, height: 1200 });
102-
await sendMouse({ type: 'click', position: [740, 600] }); // open menu
103-
await timeout(200); // await menu to be opened
104-
await sendMouse({ type: 'click', position: [740, 700] }); // click on move down
101+
await sendMouse({ type: 'click', position: [740, 650] }); // open menu
102+
await timeout(500); // await menu to be opened
103+
await sendMouse({ type: 'click', position: [740, 750] }); // click on move down
105104

106105
const toBeMovedFCDA = dataSet.querySelectorAll(':scope > FCDA')[1];
107106
const reference = toBeMovedFCDA.nextElementSibling?.nextElementSibling;

‎editors/dataset/data-set-element-editor.test.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ import { visualDiff } from '@web/test-runner-visual-regression';
77

88
import { dataSetDoc } from './data-set-editor.testfiles.js';
99

10-
import '../../oscd-publisher.js'; // for loading of components only
11-
import './data-set-element-editor.js';
12-
import type { DataSetElementEditor } from './data-set-element-editor.js';
10+
import { DataSetElementEditor } from './data-set-element-editor.js';
11+
12+
window.customElements.define('data-set-element-editor', DataSetElementEditor);
1313

1414
const factor = window.process && process.env.CI ? 4 : 2;
1515
function timeout(ms: number) {

‎editors/dataset/data-set-element-editor.ts

+38-35
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
/* eslint-disable import/no-extraneous-dependencies */
22
import { css, html, LitElement, TemplateResult } from 'lit';
3-
import {
4-
customElement,
5-
property,
6-
query,
7-
queryAll,
8-
state,
9-
} from 'lit/decorators.js';
3+
import { property, query, queryAll, state } from 'lit/decorators.js';
4+
5+
import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
106

7+
import {
8+
ActionItem,
9+
ActionList,
10+
} from '@openenergytools/filterable-lists/dist/ActionList.js';
1111
import { MdDialog } from '@scopedelement/material-web/dialog/MdDialog.js';
12+
import { MdIcon } from '@scopedelement/material-web/icon/MdIcon.js';
1213
import { MdTextButton } from '@scopedelement/material-web/button/MdTextButton.js';
13-
// import '@scopedelement/material-web/icon/icon.js'
14+
import { SclTextField } from '@openenergytools/scl-text-field';
15+
import { TreeGrid } from '@openenergytools/tree-grid';
1416

1517
import { newEditEvent } from '@openenergytools/open-scd-core';
16-
import type { TreeGrid } from '@openenergytools/tree-grid';
1718
import {
1819
canAddFCDA,
1920
find,
@@ -22,15 +23,6 @@ import {
2223
removeFCDA,
2324
updateDataSet,
2425
} from '@openenergytools/scl-lib';
25-
import '@openenergytools/filterable-lists/dist/action-list.js';
26-
// eslint-disable-next-line import/no-duplicates
27-
import '@openenergytools/scl-text-field';
28-
import type {
29-
ActionItem,
30-
ActionList,
31-
} from '@openenergytools/filterable-lists/dist/ActionList.js';
32-
// eslint-disable-next-line import/no-duplicates
33-
import { SclTextField } from '@openenergytools/scl-text-field';
3426

3527
import { addFCDAs, addFCDOs } from './foundation.js';
3628
import { dataAttributeTree } from './dataAttributePicker.js';
@@ -83,8 +75,16 @@ function loadIcon(percent: number): string {
8375
return 'stroke_full';
8476
}
8577

86-
@customElement('data-set-element-editor')
87-
export class DataSetElementEditor extends LitElement {
78+
export class DataSetElementEditor extends ScopedElementsMixin(LitElement) {
79+
static scopedElements = {
80+
'action-list': ActionList,
81+
'md-text-button': MdTextButton,
82+
'md-dialog': MdDialog,
83+
'md-icon': MdIcon,
84+
'tree-grid': TreeGrid,
85+
'scl-text-field': SclTextField,
86+
};
87+
8888
/** The document being edited as provided to plugins by [[`OpenSCD`]]. */
8989
@property({ attribute: false })
9090
doc!: XMLDocument;
@@ -125,15 +125,15 @@ export class DataSetElementEditor extends LitElement {
125125

126126
@query('#dapicker') daPickerDialog!: MdDialog;
127127

128-
@query('#dapicker > oscd-tree-grid') daPicker!: TreeGrid;
128+
@query('#dapicker > tree-grid') daPicker!: TreeGrid;
129129

130130
@query('.da.picker.save') daPickerSaveButton!: MdTextButton;
131131

132132
@query('#dopickerbutton') doPickerButton!: MdTextButton;
133133

134134
@query('#dopicker') doPickerDialog!: MdDialog;
135135

136-
@query('#dopicker > oscd-tree-grid') doPicker!: TreeGrid;
136+
@query('#dopicker > tree-grid') doPicker!: TreeGrid;
137137

138138
@query('.do.picker.save') doPickerSaveButton!: MdTextButton;
139139

@@ -147,7 +147,7 @@ export class DataSetElementEditor extends LitElement {
147147
if (input instanceof SclTextField) input.reset();
148148
}
149149

150-
private onInputChange(): void {
150+
onInputChange(): void {
151151
if (!this.element) return;
152152

153153
this.someDiffOnInputs = Array.from(this.inputs ?? []).some(
@@ -301,9 +301,7 @@ export class DataSetElementEditor extends LitElement {
301301
>Add data object<md-icon slot="icon">playlist_add</me-icon></md-text-button
302302
><md-dialog id="dopicker">
303303
<div slot="headline">Add Data Objects</div>
304-
<oscd-tree-grid slot="content" .tree=${dataObjectTree(
305-
server
306-
)}></oscd-tree-grid>
304+
<tree-grid slot="content" .tree=${dataObjectTree(server)}></tree-grid>
307305
<div slot="actions">
308306
<md-text-button
309307
@click=${() => this.doPickerDialog?.close()}
@@ -324,18 +322,23 @@ export class DataSetElementEditor extends LitElement {
324322
icon="playlist_add"
325323
?disabled=${!canAddFCDA(this.element!)}
326324
@click=${() => this.daPickerDialog.show()}
327-
>Add data attribute<md-icon slot="icon">playlist_add</me-icon></md-text-button
325+
>Add data attribute<md-icon slot="icon"
326+
>playlist_add</md-icon
327+
></md-text-button
328328
><md-dialog id="dapicker">
329329
<div slot="headline">Add Data Attributes</div>
330-
<oscd-tree-grid slot="content" .tree="${dataAttributeTree(
331-
server
332-
)}"></oscd-tree-grid>
330+
<tree-grid
331+
slot="content"
332+
.tree="${dataAttributeTree(server)}"
333+
></tree-grid>
333334
<div slot="actions">
334-
<md-text-button @click=${() =>
335-
this.daPickerDialog?.close()}>Close</md-text-button>
336-
<md-text-button class="da picker save" @click=${
337-
this.saveDataAttributes
338-
} >
335+
<md-text-button @click=${() => this.daPickerDialog?.close()}
336+
>Close</md-text-button
337+
>
338+
<md-text-button
339+
class="da picker save"
340+
@click=${this.saveDataAttributes}
341+
>
339342
Save
340343
<md-icon slot="icon">Save</md-icon>
341344
</md-text-button>

‎editors/gsecontrol/gse-control-editor.spec.ts

+2-9
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,11 @@ import {
1111
isUpdate,
1212
} from '@openenergytools/scl-lib/dist/foundation/utils.js';
1313

14-
import { MdDialog } from '@scopedelement/material-web/dialog/MdDialog.js';
15-
import { MdOutlinedButton } from '@scopedelement/material-web/button/MdOutlinedButton.js';
16-
import { MdTextButton } from '@scopedelement/material-web/button/MdTextButton.js';
17-
1814
import { gseControlDoc } from './gseControl.testfiles.js';
1915

20-
import './gse-control-editor.js';
21-
import type { GseControlEditor } from './gse-control-editor.js';
16+
import { GseControlEditor } from './gse-control-editor.js';
2217

23-
window.customElements.define('md-outlined-button', MdOutlinedButton);
24-
window.customElements.define('md-text-button', MdTextButton);
25-
window.customElements.define('md-dialog', MdDialog);
18+
window.customElements.define('gse-control-editor', GseControlEditor);
2619

2720
function timeout(ms: number) {
2821
return new Promise(res => {

‎editors/gsecontrol/gse-control-editor.test.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ import { visualDiff } from '@web/test-runner-visual-regression';
77

88
import { gseControlDoc, otherGseControlDoc } from './gseControl.testfiles.js';
99

10-
import '../../oscd-publisher.js'; // for loading of components only
11-
import './gse-control-editor.js';
12-
import type { GseControlEditor } from './gse-control-editor.js';
10+
import { GseControlEditor } from './gse-control-editor.js';
11+
12+
window.customElements.define('gse-control-editor', GseControlEditor);
1313

1414
const factor = window.process && process.env.CI ? 4 : 2;
1515
function timeout(ms: number) {

0 commit comments

Comments
 (0)