From 4f51d314d15d7ea01ae18640a50828871e9b5d65 Mon Sep 17 00:00:00 2001 From: Rob Tjalma Date: Mon, 29 Nov 2021 21:26:02 +0100 Subject: [PATCH 1/5] Added terminal/connectivity node information --- src/editors/SingleLineDiagram.ts | 29 ++++++++- src/editors/singlelinediagram/sld-drawing.ts | 13 ++-- src/icons.ts | 4 +- src/translations/de.ts | 23 +++++++ src/translations/en.ts | 23 +++++++ src/wizards/connectivitynode.ts | 55 +++++++++++++++++ src/wizards/terminal.ts | 65 ++++++++++++++++++++ src/wizards/wizard-library.ts | 6 +- 8 files changed, 202 insertions(+), 16 deletions(-) create mode 100644 src/wizards/connectivitynode.ts create mode 100644 src/wizards/terminal.ts diff --git a/src/editors/SingleLineDiagram.ts b/src/editors/SingleLineDiagram.ts index 515c99afa6..ed92883a45 100644 --- a/src/editors/SingleLineDiagram.ts +++ b/src/editors/SingleLineDiagram.ts @@ -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'; @@ -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. @@ -145,12 +146,15 @@ export default class SingleLineDiagramPlugin extends LitElement { .filter(cNode => cNode.getAttribute('name') !== 'grounded') .filter(cNode => getConnectedTerminals(cNode).length > 0) .forEach(cNode => { + console.log(cNode) const cNodePosition = getAbsolutePositionConnectivityNode(cNode); const cNodeElement = createConnectivityNodeElement( cNode, cNodePosition ); + cNodeElement.addEventListener('click', () => this.openEditWizard(cNode)); + this.addElementToGroup(cNodeElement, identity(cNode.parentElement)); }); }); @@ -236,6 +240,8 @@ export default class SingleLineDiagramPlugin extends LitElement { terminalElement! ); + terminal.addEventListener('click', () => this.openEditWizard(terminalElement!)); + this.svg .querySelectorAll(`g[id="${identity(cEquipment)}"]`) .forEach(eq => eq.appendChild(terminal)); @@ -304,8 +310,10 @@ export default class SingleLineDiagramPlugin extends LitElement { terminalElement! ); + terminal.addEventListener('click', () => this.openEditWizard(terminalElement!)); + this.svg - .querySelectorAll(` g[id="${identity(cEquipment)}"]`) + .querySelectorAll(`g[id="${identity(cEquipment)}"]`) .forEach(eq => eq.appendChild(terminal)); }); }); @@ -321,7 +329,7 @@ export default class SingleLineDiagramPlugin extends LitElement { this.drawPowerTransformers(); this.drawConnectivityNodes(); this.drawBusBars(); - + this.drawConnectivityNodeConnections(); this.drawBusBarConnections(); } @@ -337,6 +345,11 @@ export default class SingleLineDiagramPlugin extends LitElement { .forEach(group => group.appendChild(elementToAdd)); } + openEditWizard(element: Element): void { + const wizard = wizards[(element.tagName)].edit(element); + if (wizard) this.dispatchEvent(newWizardEvent(wizard)); + } + firstUpdated(): void { panzoom(this.panzoomContainer); this.drawSubstationElements(); @@ -360,5 +373,15 @@ export default class SingleLineDiagramPlugin extends LitElement { .sldContainer { overflow: hidden; } + + g[type='ConnectivityNode']:hover { + outline: 2px dashed var(--mdc-theme-primary); + transition: transform 200ms linear, box-shadow 250ms linear; + } + + g[type='Terminal']:hover { + outline: 2px dashed var(--mdc-theme-primary); + transition: transform 200ms linear, box-shadow 250ms linear; + } `; } diff --git a/src/editors/singlelinediagram/sld-drawing.ts b/src/editors/singlelinediagram/sld-drawing.ts index bd8bafef3d..4ddf9288a7 100644 --- a/src/editors/singlelinediagram/sld-drawing.ts +++ b/src/editors/singlelinediagram/sld-drawing.ts @@ -200,15 +200,7 @@ 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); return groupElement; } @@ -409,7 +401,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; } diff --git a/src/icons.ts b/src/icons.ts index 39be94b51b..cb77ae478c 100644 --- a/src/icons.ts +++ b/src/icons.ts @@ -565,11 +565,11 @@ export const connectivityNodeIcon = html` `; diff --git a/src/translations/de.ts b/src/translations/de.ts index 65572d45c4..5d917da7ed 100644 --- a/src/translations/de.ts +++ b/src/translations/de.ts @@ -196,6 +196,29 @@ export const de: Translations = { }, unknownType: 'Unbekannter Typ', }, + connectivitynode: { + name: '????', + wizard: { + nameHelper: '????', + pathNameHelper: '????', + title: { + add: '????', + edit: '????', + }, + }, + }, + terminal: { + name: '????', + wizard: { + nameHelper: '????', + connectivityNodeHelper: '????', + cNodeNameHelper: '????', + title: { + add: '????', + edit: '????', + }, + }, + }, templates: { name: 'Data Type Templates', missing: 'DataTypeTemplates fehlen', diff --git a/src/translations/en.ts b/src/translations/en.ts index 8187304718..1e7aa504fd 100644 --- a/src/translations/en.ts +++ b/src/translations/en.ts @@ -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', diff --git a/src/wizards/connectivitynode.ts b/src/wizards/connectivitynode.ts new file mode 100644 index 0000000000..26468ea5e1 --- /dev/null +++ b/src/wizards/connectivitynode.ts @@ -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``, + html``, + ]; +} + +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 + ), + }, + ]; +} diff --git a/src/wizards/terminal.ts b/src/wizards/terminal.ts new file mode 100644 index 0000000000..d6bf82473e --- /dev/null +++ b/src/wizards/terminal.ts @@ -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``, + html``, + html``, + ]; +} + +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 + ), + }, + ]; +} diff --git a/src/wizards/wizard-library.ts b/src/wizards/wizard-library.ts index ec98dbaefa..cb53b1d7e9 100644 --- a/src/wizards/wizard-library.ts +++ b/src/wizards/wizard-library.ts @@ -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, @@ -111,7 +113,7 @@ export const wizards: Record< create: emptyWizard, }, ConnectivityNode: { - edit: emptyWizard, + edit: editConnectivityNodeWizard, create: emptyWizard, }, DA: { @@ -483,7 +485,7 @@ export const wizards: Record< create: emptyWizard, }, Terminal: { - edit: emptyWizard, + edit: editTerminalWizard, create: emptyWizard, }, Text: { From 2c5123bc8ed304e6a9f5211f6afa6fe4bf5d5146 Mon Sep 17 00:00:00 2001 From: Rob Tjalma Date: Mon, 29 Nov 2021 21:37:05 +0100 Subject: [PATCH 2/5] Removed console.log --- src/editors/SingleLineDiagram.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/editors/SingleLineDiagram.ts b/src/editors/SingleLineDiagram.ts index ed92883a45..e424999cac 100644 --- a/src/editors/SingleLineDiagram.ts +++ b/src/editors/SingleLineDiagram.ts @@ -146,7 +146,6 @@ export default class SingleLineDiagramPlugin extends LitElement { .filter(cNode => cNode.getAttribute('name') !== 'grounded') .filter(cNode => getConnectedTerminals(cNode).length > 0) .forEach(cNode => { - console.log(cNode) const cNodePosition = getAbsolutePositionConnectivityNode(cNode); const cNodeElement = createConnectivityNodeElement( cNode, From 9594e7c20de56f61f4abc2218d47ad597cf86f63 Mon Sep 17 00:00:00 2001 From: Rob Tjalma Date: Mon, 29 Nov 2021 23:21:39 +0100 Subject: [PATCH 3/5] Some refactoring --- src/editors/SingleLineDiagram.ts | 19 ++++++++++--------- src/editors/singlelinediagram/sld-drawing.ts | 13 ++++++++++--- src/icons.ts | 2 +- 3 files changed, 21 insertions(+), 13 deletions(-) diff --git a/src/editors/SingleLineDiagram.ts b/src/editors/SingleLineDiagram.ts index e424999cac..80326de72f 100644 --- a/src/editors/SingleLineDiagram.ts +++ b/src/editors/SingleLineDiagram.ts @@ -149,11 +149,10 @@ export default class SingleLineDiagramPlugin extends LitElement { const cNodePosition = getAbsolutePositionConnectivityNode(cNode); const cNodeElement = createConnectivityNodeElement( cNode, - cNodePosition + cNodePosition, + () => this.openEditWizard(cNode) ); - cNodeElement.addEventListener('click', () => this.openEditWizard(cNode)); - this.addElementToGroup(cNodeElement, identity(cNode.parentElement)); }); }); @@ -236,11 +235,10 @@ export default class SingleLineDiagramPlugin extends LitElement { const terminal = createTerminalElement( cEquipmentAbsolutePosition, sideToDrawTerminalOn, - terminalElement! + terminalElement!, + () => this.openEditWizard(terminalElement!) ); - terminal.addEventListener('click', () => this.openEditWizard(terminalElement!)); - this.svg .querySelectorAll(`g[id="${identity(cEquipment)}"]`) .forEach(eq => eq.appendChild(terminal)); @@ -306,11 +304,10 @@ export default class SingleLineDiagramPlugin extends LitElement { const terminal = createTerminalElement( cEquipmentAbsolutePosition, sideToDrawTerminalOn, - terminalElement! + terminalElement!, + () => this.openEditWizard(terminalElement!) ); - terminal.addEventListener('click', () => this.openEditWizard(terminalElement!)); - this.svg .querySelectorAll(`g[id="${identity(cEquipment)}"]`) .forEach(eq => eq.appendChild(terminal)); @@ -344,6 +341,10 @@ 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[(element.tagName)].edit(element); if (wizard) this.dispatchEvent(newWizardEvent(wizard)); diff --git a/src/editors/singlelinediagram/sld-drawing.ts b/src/editors/singlelinediagram/sld-drawing.ts index 4ddf9288a7..d9cbce09f6 100644 --- a/src/editors/singlelinediagram/sld-drawing.ts +++ b/src/editors/singlelinediagram/sld-drawing.ts @@ -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); @@ -187,7 +189,6 @@ export function createTerminalElement( ? identity(terminalElement) : 'unidentifiable'; - const terminalName = getNameAttribute(terminalElement)!; const pointToDrawTerminalOn = getAbsolutePositionTerminal( elementPosition, sideToDraw @@ -202,6 +203,8 @@ export function createTerminalElement( groupElement.appendChild(icon); + groupElement.addEventListener('click', clickAction); + return groupElement; } @@ -314,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); @@ -331,6 +336,8 @@ export function createConnectivityNodeElement( groupElement.appendChild(icon); }); + groupElement.addEventListener('click', clickAction); + return groupElement; } diff --git a/src/icons.ts b/src/icons.ts index cb77ae478c..b6eecfee3d 100644 --- a/src/icons.ts +++ b/src/icons.ts @@ -569,7 +569,7 @@ export const connectivityNodeIcon = html` `; From 738cc01103f0d43a8eb1b75066cd733fd32c07b3 Mon Sep 17 00:00:00 2001 From: Rob Tjalma Date: Mon, 29 Nov 2021 23:44:28 +0100 Subject: [PATCH 4/5] Small refactoring --- src/editors/SingleLineDiagram.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/editors/SingleLineDiagram.ts b/src/editors/SingleLineDiagram.ts index 80326de72f..9d6b1173c8 100644 --- a/src/editors/SingleLineDiagram.ts +++ b/src/editors/SingleLineDiagram.ts @@ -374,12 +374,7 @@ export default class SingleLineDiagramPlugin extends LitElement { overflow: hidden; } - g[type='ConnectivityNode']:hover { - outline: 2px dashed var(--mdc-theme-primary); - transition: transform 200ms linear, box-shadow 250ms linear; - } - - g[type='Terminal']:hover { + g[type='ConnectivityNode']:hover, g[type='Terminal']:hover { outline: 2px dashed var(--mdc-theme-primary); transition: transform 200ms linear, box-shadow 250ms linear; } From f20401626cd3234261ef3b398cc361e5eac50b0e Mon Sep 17 00:00:00 2001 From: Christian Dinkel Date: Tue, 30 Nov 2021 23:12:32 +0100 Subject: [PATCH 5/5] fix(translations/de): add missing German translations Thank you very much for adding these nice wizards to translate! :+1: --- src/translations/de.ts | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/translations/de.ts b/src/translations/de.ts index 5d917da7ed..6511385cdf 100644 --- a/src/translations/de.ts +++ b/src/translations/de.ts @@ -197,25 +197,25 @@ export const de: Translations = { unknownType: 'Unbekannter Typ', }, connectivitynode: { - name: '????', + name: 'Verbindungsknoten', wizard: { - nameHelper: '????', - pathNameHelper: '????', + nameHelper: 'Verbindungsknoten Name', + pathNameHelper: 'Verbindungsknoten Beschreibung', title: { - add: '????', - edit: '????', + add: 'Verbindungsknoten hinzufügen', + edit: 'Verbindungsknoten bearbeiten', }, }, }, terminal: { - name: '????', + name: 'Anschluss', wizard: { - nameHelper: '????', - connectivityNodeHelper: '????', - cNodeNameHelper: '????', + nameHelper: 'Anschluss Name', + connectivityNodeHelper: 'Anschluss Verbindungsknoten', + cNodeNameHelper: 'Anschluss Verbindungsknoten Name', title: { - add: '????', - edit: '????', + add: 'Anschlussknoten hinzufügen', + edit: 'Anschlussknoten bearbeiten', }, }, },