design.estate/dees-wcctools
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(properties-panel): enhance element detection and error handling for nested structures

Browse Source
This commit is contained in:
Juergen Kunz
2025-06-16 15:56:12 +00:00
parent 992af2668e
commit 21b7158a35
9 changed files with 693 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
ts_web/elements/wcc-properties.ts
View File

@ -229,23 +229,28 @@ export class WccProperties extends DeesElement {
private async findElementRecursively(container: Element, elementClass: any, maxDepth: number = 5): Promise<HTMLElement | null> {
if (maxDepth <= 0) return null;
// Check direct children
for (const child of Array.from(container.children)) {
if (child instanceof elementClass) {
return child as HTMLElement;
}
}
// Check shadow roots of children
for (const child of Array.from(container.children)) {
if (child.shadowRoot) {
const found = await this.findElementRecursively(child.shadowRoot as any, elementClass, maxDepth - 1);
if (found) return found;
try {
// Check direct children
for (const child of Array.from(container.children)) {
if (child instanceof elementClass) {
return child as HTMLElement;
}
}
// Also check nested children
const found = await this.findElementRecursively(child, elementClass, maxDepth - 1);
if (found) return found;
// Search in all children recursively
for (const child of Array.from(container.children)) {
// First, always check the light DOM children
const found = await this.findElementRecursively(child, elementClass, maxDepth - 1);
if (found) return found;
// Also check shadow root if it exists
if (child.shadowRoot) {
const shadowFound = await this.findElementRecursively(child.shadowRoot as any, elementClass, maxDepth - 1);
if (shadowFound) return shadowFound;
}
}
} catch (error) {
console.error('Error in findElementRecursively:', error);
}
return null;
@ -254,6 +259,9 @@ export class WccProperties extends DeesElement {
public async createProperties() {
console.log('creating properties for:');
console.log(this.selectedItem);
// Clear any previous warnings
this.warning = null;
const isEnumeration = (propertyArg): boolean => {
const keys = Object.keys(propertyArg.type);
const values = [];
@ -315,15 +323,20 @@ export class WccProperties extends DeesElement {
let retries = 0;
while (!firstFoundInstantiatedElement && retries < 5) {
await new Promise(resolve => setTimeout(resolve, 200));
firstFoundInstantiatedElement = await this.findElementRecursively(
viewport,
this.selectedItem as any
);
try {
firstFoundInstantiatedElement = await this.findElementRecursively(
viewport,
this.selectedItem as any
);
} catch (error) {
console.error('Error during element search retry:', error);
}
retries++;
}
if (!firstFoundInstantiatedElement) {
this.warning = `no first instantiated element found for >>${anonItem.name}<< after ${retries} retries`;
this.propertyContent = [];
return;
}
const classProperties: Map<string, any> = anonItem.elementProperties;
@ -337,9 +350,10 @@ export class WccProperties extends DeesElement {
if (key === 'goBright' || key === 'domtools') {
continue;
}
const property = classProperties.get(key);
const propertyTypeString = await determinePropertyType(property);
propertyArray.push(
try {
const property = classProperties.get(key);
const propertyTypeString = await determinePropertyType(property);
propertyArray.push(
html`
<div class="property">
${key} / ${propertyTypeString}<br />
@ -392,6 +406,10 @@ export class WccProperties extends DeesElement {
</div>
`
);
} catch (error) {
console.error(`Error processing property ${key}:`, error);
// Continue with next property even if this one fails
}
}
this.propertyContent = propertyArray;
} else {
@ -413,7 +431,14 @@ export class WccProperties extends DeesElement {
}
public async scheduleUpdate() {
await this.createProperties();
try {
await this.createProperties();
} catch (error) {
console.error('Error creating properties:', error);
// Clear property content on error to show clean state
this.propertyContent = [];
}
// Always call super.scheduleUpdate to ensure component updates
super.scheduleUpdate();
}