Add spacer for default of choose (#8827)

This commit is contained in:
Bram Kragten 2021-04-06 18:32:30 +02:00 committed by GitHub
parent 8874aaabe9
commit 109910d18f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 3 deletions

View File

@ -10,6 +10,8 @@ export class HatGraphNode extends LitElement {
@property({ reflect: true, type: Boolean }) graphstart?: boolean; @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: Boolean }) nofocus?: boolean;
@property({ reflect: true, type: Number }) badge?: number; @property({ reflect: true, type: Number }) badge?: number;
@ -25,6 +27,12 @@ export class HatGraphNode extends LitElement {
if (!svgEl) { if (!svgEl) {
return; 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 bbox = svgEl.getBBox();
const extra_height = this.graphstart ? 2 : 1; const extra_height = this.graphstart ? 2 : 1;
const extra_width = SPACING; const extra_width = SPACING;
@ -50,7 +58,11 @@ export class HatGraphNode extends LitElement {
<path <path
class="connector" class="connector"
d=" d="
M 0 ${-SPACING - NODE_SIZE / 2} M 0 ${
this.spacer
? -SPACING * 2 - NODE_SIZE
: -SPACING - NODE_SIZE / 2
}
L 0 0 L 0 0
" "
line-caps="round" line-caps="round"
@ -58,11 +70,15 @@ export class HatGraphNode extends LitElement {
` `
} }
<g class="node"> <g class="node">
<circle ${
!this.spacer
? svg`<circle
cx="0" cx="0"
cy="0" cy="0"
r="${NODE_SIZE / 2}" r="${NODE_SIZE / 2}"
/> />`
: ""
}
${ ${
this.badge this.badge
? svg` ? svg`

View File

@ -192,6 +192,14 @@ class HatScriptGraph extends LitElement {
`; `;
})} })}
<hat-graph> <hat-graph>
<hat-graph-node
nofocus
spacer
class=${classMap({
track:
trace !== undefined && trace[0].result?.choice === "default",
})}
></hat-graph-node>
${ensureArray(config.default)?.map((action, i) => ${ensureArray(config.default)?.map((action, i) =>
this.render_node(action, `${path}/default/${i}`) this.render_node(action, `${path}/default/${i}`)
)} )}