Skip to content

Commit

Permalink
Added terminal and Connectivity Node information (#402)
Browse files Browse the repository at this point in the history
* Added terminal/connectivity node information

* Removed console.log

* Some refactoring

* Small refactoring

* fix(translations/de): add missing German translations

Thank you very much for adding these nice wizards to translate! 👍

Co-authored-by: Rob Tjalma <rob@tjalma.com>
Co-authored-by: Christian Dinkel <chhildeb@gmail.com>
  • Loading branch information
3 people committed Nov 30, 2021
1 parent f101fa8 commit c10f405
Show file tree
Hide file tree
Showing 8 changed files with 209 additions and 21 deletions.
30 changes: 24 additions & 6 deletions src/editors/SingleLineDiagram.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
TemplateResult,
} from 'lit-element';

import { identity } from '../foundation.js';
import { identity, newWizardEvent, SCLTag } from '../foundation.js';

import panzoom from 'panzoom';

Expand All @@ -33,6 +33,7 @@ import {
getPathNameAttribute,
getNameAttribute,
} from './singlelinediagram/foundation.js';
import { wizards } from '../wizards/wizard-library.js';

/**
* Main class plugin for Single Line Diagram editor.
Expand Down Expand Up @@ -148,7 +149,8 @@ export default class SingleLineDiagramPlugin extends LitElement {
const cNodePosition = getAbsolutePositionConnectivityNode(cNode);
const cNodeElement = createConnectivityNodeElement(
cNode,
cNodePosition
cNodePosition,
() => this.openEditWizard(cNode)
);

this.addElementToGroup(cNodeElement, identity(cNode.parentElement));
Expand Down Expand Up @@ -233,7 +235,8 @@ export default class SingleLineDiagramPlugin extends LitElement {
const terminal = createTerminalElement(
cEquipmentAbsolutePosition,
sideToDrawTerminalOn,
terminalElement!
terminalElement!,
() => this.openEditWizard(terminalElement!)
);

this.svg
Expand Down Expand Up @@ -301,11 +304,12 @@ export default class SingleLineDiagramPlugin extends LitElement {
const terminal = createTerminalElement(
cEquipmentAbsolutePosition,
sideToDrawTerminalOn,
terminalElement!
terminalElement!,
() => this.openEditWizard(terminalElement!)
);

this.svg
.querySelectorAll(` g[id="${identity(cEquipment)}"]`)
.querySelectorAll(`g[id="${identity(cEquipment)}"]`)
.forEach(eq => eq.appendChild(terminal));
});
});
Expand All @@ -321,7 +325,7 @@ export default class SingleLineDiagramPlugin extends LitElement {
this.drawPowerTransformers();
this.drawConnectivityNodes();
this.drawBusBars();

this.drawConnectivityNodeConnections();
this.drawBusBarConnections();
}
Expand All @@ -337,6 +341,15 @@ export default class SingleLineDiagramPlugin extends LitElement {
.forEach(group => group.appendChild(elementToAdd));
}

/**
* Open an Edit wizard for an element.
* @param element - The element to show the wizard for.
*/
openEditWizard(element: Element): void {
const wizard = wizards[<SCLTag>(element.tagName)].edit(element);
if (wizard) this.dispatchEvent(newWizardEvent(wizard));
}

firstUpdated(): void {
panzoom(this.panzoomContainer);
this.drawSubstationElements();
Expand All @@ -360,5 +373,10 @@ export default class SingleLineDiagramPlugin extends LitElement {
.sldContainer {
overflow: hidden;
}
g[type='ConnectivityNode']:hover, g[type='Terminal']:hover {
outline: 2px dashed var(--mdc-theme-primary);
transition: transform 200ms linear, box-shadow 250ms linear;
}
`;
}
26 changes: 14 additions & 12 deletions src/editors/singlelinediagram/sld-drawing.ts
Original file line number Diff line number Diff line change
Expand Up @@ -173,12 +173,14 @@ export function createTextElement(
* @param elementPosition - The position of the element belonging to the terminal/
* @param sideToDraw - The side of the element the terminal must be drawn on.
* @param terminalElement - The terminal element to extract information from.
* @param clickAction - The action to execute when the terminal is being clicked.
* @returns The terminal SVG element.
*/
export function createTerminalElement(
elementPosition: Point,
sideToDraw: Side,
terminalElement: Element
terminalElement: Element,
clickAction: () => void
): SVGElement {
const groupElement = createGroupElement(terminalElement);

Expand All @@ -187,7 +189,6 @@ export function createTerminalElement(
? <string>identity(terminalElement)
: 'unidentifiable';

const terminalName = getNameAttribute(terminalElement)!;
const pointToDrawTerminalOn = getAbsolutePositionTerminal(
elementPosition,
sideToDraw
Expand All @@ -200,15 +201,9 @@ export function createTerminalElement(
icon.setAttribute('cy', `${pointToDrawTerminalOn.y}`);
icon.setAttribute('r', '2');

// Also add a text element.
const textElementPosition =
sideToDraw == 'bottom' || sideToDraw == 'top'
? { x: pointToDrawTerminalOn.x! + 5, y: pointToDrawTerminalOn.y! + 5 }
: { x: pointToDrawTerminalOn.x! - 5, y: pointToDrawTerminalOn.y! - 5 };
const text = createTextElement(terminalName, textElementPosition, 'xx-small');

groupElement.appendChild(icon);
groupElement.appendChild(text);

groupElement.addEventListener('click', clickAction);

return groupElement;
}
Expand Down Expand Up @@ -322,11 +317,13 @@ export function createPowerTransformerElement(
* Create a Connectivity Node element.
* @param cNodeElement - The name of the busbar
* @param position - The SCL position of the Connectivity Node.
* @param clickAction - The action to execute when the terminal is being clicked.
* @returns The Connectivity Node SVG element.
*/
export function createConnectivityNodeElement(
cNodeElement: Element,
position: Point
position: Point,
clickAction: () => void
): SVGElement {
const groupElement = createGroupElement(cNodeElement);

Expand All @@ -339,6 +336,8 @@ export function createConnectivityNodeElement(
groupElement.appendChild(icon);
});

groupElement.addEventListener('click', clickAction);

return groupElement;
}

Expand Down Expand Up @@ -409,7 +408,10 @@ export function drawRouteBetweenElements(
line.setAttribute('stroke', 'currentColor');
line.setAttribute('stroke-width', '1.5');

svgToDrawOn.appendChild(line);
// Inserting elements like this works kind of like z-index (not supported in SVG yet),
// these elements are placed behind all other elements.
// By doing it like this, all other elements are hoverable for example.
svgToDrawOn.insertAdjacentElement('afterbegin', line);

return sides;
}
Expand Down
2 changes: 1 addition & 1 deletion src/icons.ts
Original file line number Diff line number Diff line change
Expand Up @@ -565,7 +565,7 @@ export const connectivityNodeIcon = html`<svg
>
<circle
stroke="currentColor"
fill="none"
fill="currentColor"
stroke-width="1"
cx="12.5"
cy="12.5"
Expand Down
23 changes: 23 additions & 0 deletions src/translations/de.ts
Original file line number Diff line number Diff line change
Expand Up @@ -196,6 +196,29 @@ export const de: Translations = {
},
unknownType: 'Unbekannter Typ',
},
connectivitynode: {
name: 'Verbindungsknoten',
wizard: {
nameHelper: 'Verbindungsknoten Name',
pathNameHelper: 'Verbindungsknoten Beschreibung',
title: {
add: 'Verbindungsknoten hinzufügen',
edit: 'Verbindungsknoten bearbeiten',
},
},
},
terminal: {
name: 'Anschluss',
wizard: {
nameHelper: 'Anschluss Name',
connectivityNodeHelper: 'Anschluss Verbindungsknoten',
cNodeNameHelper: 'Anschluss Verbindungsknoten Name',
title: {
add: 'Anschlussknoten hinzufügen',
edit: 'Anschlussknoten bearbeiten',
},
},
},
templates: {
name: 'Data Type Templates',
missing: 'DataTypeTemplates fehlen',
Expand Down
23 changes: 23 additions & 0 deletions src/translations/en.ts
Original file line number Diff line number Diff line change
Expand Up @@ -193,6 +193,29 @@ export const en = {
},
unknownType: 'Unknown type',
},
connectivitynode: {
name: 'Connectivity Node',
wizard: {
nameHelper: 'Connectivity node name',
pathNameHelper: 'Connectivity node pathname',
title: {
add: 'Add Connectivity node',
edit: 'Edit Connectivity node',
},
},
},
terminal: {
name: 'Terminal',
wizard: {
nameHelper: 'Terminal name',
connectivityNodeHelper: 'Terminal connectivity node',
cNodeNameHelper: 'Terminal connectivity node name',
title: {
add: 'Add Terminal',
edit: 'Edit Terminal',
},
},
},
templates: {
name: 'Data Type Templates',
missing: 'DataTypeTemplates missing',
Expand Down
55 changes: 55 additions & 0 deletions src/wizards/connectivitynode.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import { html, TemplateResult } from 'lit-element';
import { get, translate } from 'lit-translate';

import {
isPublic,
Wizard,
} from '../foundation.js';

function render(
name: string | null,
pathName: string | null,
reservedNames: string[]
): TemplateResult[] {
return [
html`<wizard-textfield
label="name"
.maybeValue=${name}
helper="${translate('connectivitynode.wizard.nameHelper')}"
required
validationMessage="${translate('textfield.required')}"
dialogInitialFocus
.reservedValues=${reservedNames}
readonly
></wizard-textfield>`,
html`<wizard-textfield
label="pathName"
.maybeValue=${pathName}
helper="${translate('connectivitynode.wizard.pathNameHelper')}"
required
validationMessage="${translate('textfield.required')}"
readonly
></wizard-textfield>`,
];
}

export function editConnectivityNodeWizard(element: Element): Wizard {
const reservedNames = Array.from(
element.parentNode!.querySelectorAll('ConnectivityNode')
)
.filter(isPublic)
.map(cNode => cNode.getAttribute('name') ?? '')
.filter(name => name !== element.getAttribute('name'));

return [
{
title: get('connectivitynode.wizard.title.edit'),
element,
content: render(
element.getAttribute('name'),
element.getAttribute('pathName'),
reservedNames
),
},
];
}
65 changes: 65 additions & 0 deletions src/wizards/terminal.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import { html, TemplateResult } from 'lit-element';
import { get, translate } from 'lit-translate';

import {
isPublic,
Wizard,
} from '../foundation.js';

function render(
name: string | null,
connectivityNode: string | null,
cNodeName: string | null,
reservedNames: string[]
): TemplateResult[] {
return [
html`<wizard-textfield
label="name"
.maybeValue=${name}
helper="${translate('terminal.wizard.nameHelper')}"
required
validationMessage="${translate('textfield.required')}"
dialogInitialFocus
.reservedValues=${reservedNames}
readonly
></wizard-textfield>`,
html`<wizard-textfield
label="connectivityNode"
.maybeValue=${connectivityNode}
helper="${translate('terminal.wizard.connectivityNodeHelper')}"
required
validationMessage="${translate('textfield.required')}"
readonly
></wizard-textfield>`,
html`<wizard-textfield
label="cNodeName"
.maybeValue=${cNodeName}
helper="${translate('terminal.wizard.cNodeNameHelper')}"
required
validationMessage="${translate('textfield.required')}"
readonly
></wizard-textfield>`,
];
}

export function editTerminalWizard(element: Element): Wizard {
const reservedNames = Array.from(
element.parentNode!.querySelectorAll('ConnectivityNode')
)
.filter(isPublic)
.map(cNode => cNode.getAttribute('name') ?? '')
.filter(name => name !== element.getAttribute('name'));

return [
{
title: get('terminal.wizard.title.edit'),
element,
content: render(
element.getAttribute('name'),
element.getAttribute('connectivityNode'),
element.getAttribute('cNodeName'),
reservedNames
),
},
];
}
6 changes: 4 additions & 2 deletions src/wizards/wizard-library.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@ import {
createConductingEquipmentWizard,
editConductingEquipmentWizard,
} from './conductingequipment.js';
import { editConnectivityNodeWizard } from './connectivitynode.js';
import { createFCDAsWizard } from './fcda.js';
import { lNodeWizard } from './lnode.js';
import { createSubstationWizard, substationEditWizard } from './substation.js';
import { editTerminalWizard } from './terminal.js';
import {
voltageLevelCreateWizard,
voltageLevelEditWizard,
Expand Down Expand Up @@ -111,7 +113,7 @@ export const wizards: Record<
create: emptyWizard,
},
ConnectivityNode: {
edit: emptyWizard,
edit: editConnectivityNodeWizard,
create: emptyWizard,
},
DA: {
Expand Down Expand Up @@ -483,7 +485,7 @@ export const wizards: Record<
create: emptyWizard,
},
Terminal: {
edit: emptyWizard,
edit: editTerminalWizard,
create: emptyWizard,
},
Text: {
Expand Down

0 comments on commit c10f405

Please sign in to comment.