diff --git a/diff-tree.ts b/diff-tree.ts index 0ab4d325..4773cb69 100644 --- a/diff-tree.ts +++ b/diff-tree.ts @@ -29,7 +29,7 @@ function getDiff(ours: Description, theirs: Description) { diff[key] = { ours: ours[key], theirs: theirs[key] }; else if (Array.isArray(val)) { const arrayDiff = { ours: [] as string[], theirs: [] as string[] }; - const vals = new Set([...ours[key], ...theirs[key]]); + const vals = new Set([...(ours[key] ?? []), ...(theirs[key] ?? [])]); vals.forEach((val) => { const inOurs = ours[key]?.includes(val); const inTheirs = theirs[key]?.includes(val); @@ -82,9 +82,8 @@ export class DiffTree extends LitElement { >(); @query("md-icon-button") expandButton!: HTMLElement; - get expanded(): boolean { - return this.expandButton?.hasAttribute("selected"); - } + @property({ type: Boolean }) + expanded = false; get ourHasher(): ReturnType | undefined { return this.ours ? this.hashers.get(this.ours.ownerDocument) : undefined; @@ -145,11 +144,13 @@ export class DiffTree extends LitElement { elementDiff[id] ??= {}; elementDiff[id].theirs = element; }); + const expanded = Object.keys(elementDiff).length === 1; return Object.entries(elementDiff).map(([id, { ours, theirs }]) => { return html``; }); })} @@ -170,6 +171,7 @@ export class DiffTree extends LitElement { ${name} ${ours} + → ${theirs} `, )} @@ -180,10 +182,11 @@ export class DiffTree extends LitElement { ${ns} ${k} ${(d as { ours: string }).ours} + → ${(d as { theirs: string }).theirs} `, ), - )}, + )} `; } @@ -194,15 +197,14 @@ export class DiffTree extends LitElement { renderElement() { const element = this.ours ?? this.theirs; if (!element) return nothing; - const id = identity(element); + const id = identity(element) || element.tagName; const tag = element.tagName; const description = this.ourDescription ?? this.theirDescription; const hash = this.ourHash ?? this.theirHash; - return html` this.requestUpdate()}> - unfold_more - unfold_less - -

${this.ours ? "-" : "+"} ${id}

+ return html` (this.expanded = !this.expanded)} + >${this.expanded ? "arrow_drop_down" : "arrow_right"} + ${this.ours ? "-" : "+"} ${id} ${this.expanded ? this.renderDiff() : ""} `; } @@ -220,23 +222,17 @@ export class DiffTree extends LitElement { Object.keys(this.ourDescription ?? {}).forEach((key) => {}); - return html` this.requestUpdate()}> - unfold_more - unfold_less - -

- ${identity(this.ours) || this.ours.tagName} - arrow_forward ${identity( - this.theirs, - ) || this.theirs.tagName} -

+ return html` (this.expanded = !this.expanded)} + >${this.expanded ? "arrow_drop_down" : "arrow_right"} + ${identity(this.ours) || this.ours.tagName} ${this.expanded ? this.renderDiff() : ""} `; } static styles = css` - md-icon-button { - float: left; - transform: scale(0.6); + md-icon { + position: relative; + top: 6px; } div { margin-left: 1em; @@ -296,7 +292,7 @@ export class DiffTree extends LitElement { border: 0.25em solid var(--oscd-base2); table-layout: auto; border-collapse: collapse; - width: max-content; + max-width: 100%; margin-left: 1.2em; margin-bottom: 0.3em; background: none; diff --git a/hash.spec.ts b/hash.spec.ts index d6780bd1..2a0ccb6a 100644 --- a/hash.spec.ts +++ b/hash.spec.ts @@ -183,6 +183,7 @@ describe("hasher", () => { ); expect(description).property("@Text").to.have.lengthOf(1); const text = db.Text[description["@Text"][0]]; + console.log(JSON.stringify(text, null, 2)); expect(text).to.exist.and.to.have.property( "xml", baseEnumType.querySelector("Text")?.outerHTML, diff --git a/hash.ts b/hash.ts index cb070822..0e261f27 100644 --- a/hash.ts +++ b/hash.ts @@ -741,7 +741,7 @@ export function hasher( }) .map(hash) .sort(); - if (hashes.length) description["@" + to] = hashes; + if (hashes.length) description["@" + to.split(">").pop()] = hashes; }); return description; diff --git a/oscd-diff.ts b/oscd-diff.ts index 9bf316ae..e638c1e3 100644 --- a/oscd-diff.ts +++ b/oscd-diff.ts @@ -25,8 +25,7 @@ export default class OscdDiff extends LitElement { hashers = new WeakMap>(); render() { - return html`

diff

- + return html`