From 3a4fffdb0b7da266af0873dc83e7d6f2f5d2454b Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Tue, 6 Apr 2021 22:31:22 +0200 Subject: [PATCH] Remove dynamic height/width calcs on graph nodes (#8832) --- src/components/trace/hat-graph-node.ts | 61 +++++------------------- src/components/trace/hat-graph-spacer.ts | 55 +++++++++++++++++++++ src/components/trace/hat-graph.ts | 8 +++- src/components/trace/hat-script-graph.ts | 7 ++- 4 files changed, 77 insertions(+), 54 deletions(-) create mode 100644 src/components/trace/hat-graph-spacer.ts diff --git a/src/components/trace/hat-graph-node.ts b/src/components/trace/hat-graph-node.ts index c9d6b8296f..ae0b59aa87 100644 --- a/src/components/trace/hat-graph-node.ts +++ b/src/components/trace/hat-graph-node.ts @@ -10,8 +10,6 @@ export class HatGraphNode extends LitElement { @property({ reflect: true, type: Boolean }) graphstart?: boolean; - @property({ reflect: true, type: Boolean }) spacer?: boolean; - @property({ reflect: true, type: Boolean }) nofocus?: boolean; @property({ reflect: true, type: Number }) badge?: number; @@ -22,34 +20,18 @@ export class HatGraphNode extends LitElement { this.setAttribute("tabindex", "0"); } - updated() { - const svgEl = this.shadowRoot?.querySelector("svg"); - if (!svgEl) { - return; - } - if (this.spacer) { - svgEl.setAttribute("width", "10px"); - svgEl.setAttribute("height", "41px"); - svgEl.setAttribute("viewBox", "-5 -40 10 26"); - return; - } - const bbox = svgEl.getBBox(); - const extra_height = this.graphstart ? 2 : 1; - const extra_width = SPACING; - svgEl.setAttribute("width", `${bbox.width + extra_width}px`); - svgEl.setAttribute("height", `${bbox.height + extra_height}px`); - svgEl.setAttribute( - "viewBox", - `${Math.ceil(bbox.x - extra_width / 2)} - ${Math.ceil(bbox.y - extra_height / 2)} - ${bbox.width + extra_width} - ${bbox.height + extra_height}` - ); - } - render() { + const height = NODE_SIZE + (this.graphstart ? 2 : SPACING + 1); + const width = SPACING + NODE_SIZE; return svg` ${ this.graphstart @@ -58,11 +40,7 @@ export class HatGraphNode extends LitElement { - ${ - !this.spacer - ? svg`` - : "" + /> } ${ this.badge @@ -114,16 +89,6 @@ export class HatGraphNode extends LitElement { :host { display: flex; flex-direction: column; - --stroke-clr: var(--stroke-color, var(--secondary-text-color)); - --active-clr: var(--active-color, var(--primary-color)); - --track-clr: var(--track-color, var(--accent-color)); - --hover-clr: var(--hover-color, var(--primary-color)); - --disabled-clr: var(--disabled-color, var(--disabled-text-color)); - --default-trigger-color: 3, 169, 244; - --rgb-trigger-color: var(--trigger-color, var(--default-trigger-color)); - --background-clr: var(--background-color, white); - --default-icon-clr: var(--icon-color, black); - --icon-clr: var(--stroke-clr); } :host(.track) { --stroke-clr: var(--track-clr); @@ -146,13 +111,11 @@ export class HatGraphNode extends LitElement { :host-context([disabled]) { --stroke-clr: var(--disabled-clr); } - :host([nofocus]):host-context(.active), :host([nofocus]):host-context(:focus) { --circle-clr: var(--active-clr); --icon-clr: var(--default-icon-clr); } - circle, path.connector { stroke: var(--stroke-clr); diff --git a/src/components/trace/hat-graph-spacer.ts b/src/components/trace/hat-graph-spacer.ts new file mode 100644 index 0000000000..22c6770a1b --- /dev/null +++ b/src/components/trace/hat-graph-spacer.ts @@ -0,0 +1,55 @@ +import { css, customElement, LitElement, property, svg } from "lit-element"; + +import { NODE_SIZE, SPACING } from "./hat-graph"; + +@customElement("hat-graph-spacer") +export class HatGraphSpacer extends LitElement { + @property({ reflect: true, type: Boolean }) disabled?: boolean; + + render() { + return svg` + + + } + + `; + } + + static get styles() { + return css` + :host { + display: flex; + flex-direction: column; + } + :host(.track) { + --stroke-clr: var(--track-clr); + --icon-clr: var(--default-icon-clr); + } + :host-context([disabled]) { + --stroke-clr: var(--disabled-clr); + } + path.connector { + stroke: var(--stroke-clr); + stroke-width: 2; + fill: none; + } + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "hat-graph-spacer": HatGraphSpacer; + } +} diff --git a/src/components/trace/hat-graph.ts b/src/components/trace/hat-graph.ts index 8b7bed8b03..c7e06ae663 100644 --- a/src/components/trace/hat-graph.ts +++ b/src/components/trace/hat-graph.ts @@ -171,7 +171,13 @@ export class HatGraph extends LitElement { --stroke-clr: var(--stroke-color, var(--secondary-text-color)); --active-clr: var(--active-color, var(--primary-color)); --track-clr: var(--track-color, var(--accent-color)); - --disabled-clr: var(--disabled-color, gray); + --hover-clr: var(--hover-color, var(--primary-color)); + --disabled-clr: var(--disabled-color, var(--disabled-text-color)); + --default-trigger-color: 3, 169, 244; + --rgb-trigger-color: var(--trigger-color, var(--default-trigger-color)); + --background-clr: var(--background-color, white); + --default-icon-clr: var(--icon-color, black); + --icon-clr: var(--stroke-clr); } :host(:focus) { outline: none; diff --git a/src/components/trace/hat-script-graph.ts b/src/components/trace/hat-script-graph.ts index 2ed44e22c1..9abf4ec9b8 100644 --- a/src/components/trace/hat-script-graph.ts +++ b/src/components/trace/hat-script-graph.ts @@ -49,6 +49,7 @@ import { WaitForTriggerAction, } from "../../data/script"; import { ensureArray } from "../../common/ensure-array"; +import "./hat-graph-spacer"; declare global { interface HASSDomEvents { @@ -192,14 +193,12 @@ class HatScriptGraph extends LitElement { `; })} - + > ${ensureArray(config.default)?.map((action, i) => this.render_node(action, `${path}/default/${i}`) )}