iobroker.mywebui 1.37.78 → 1.37.80
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -320,10 +320,8 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
|
|
|
320
320
|
return;
|
|
321
321
|
}
|
|
322
322
|
|
|
323
|
-
// Check if panel already exists
|
|
324
323
|
let visibilityPanel = visibilityDock.querySelector('#visibility-panel-container');
|
|
325
324
|
if (!visibilityPanel) {
|
|
326
|
-
// Create panel
|
|
327
325
|
visibilityPanel = document.createElement('div');
|
|
328
326
|
visibilityPanel.id = 'visibility-panel-container';
|
|
329
327
|
visibilityPanel.style.cssText = 'padding:15px;';
|
|
@@ -332,61 +330,36 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
|
|
|
332
330
|
<div id="visibility-panel-content" style="font-size:12px;"></div>
|
|
333
331
|
`;
|
|
334
332
|
visibilityDock.appendChild(visibilityPanel);
|
|
335
|
-
console.log('✅ [Visibility] Panel created and added to visibilityDock');
|
|
336
|
-
} else {
|
|
337
|
-
console.log('✅ [Visibility] Panel already exists');
|
|
338
333
|
}
|
|
339
334
|
|
|
340
|
-
|
|
341
|
-
// Expose update function globally for manual testing
|
|
342
|
-
window.updateVisibilityPanel = () => this._updateVisibilityPanel();
|
|
343
|
-
|
|
344
|
-
// Initial test render
|
|
345
335
|
setTimeout(() => {
|
|
346
336
|
const visibilityDock = this._getDomElement('visibilityDock');
|
|
347
337
|
const testContent = visibilityDock?.querySelector('#visibility-panel-content');
|
|
348
|
-
if (testContent)
|
|
338
|
+
if (testContent)
|
|
349
339
|
testContent.innerHTML = '<p style="color:#999;font-style:italic;">Select an element to configure visibility...</p>';
|
|
350
|
-
}
|
|
351
340
|
}, 100);
|
|
352
|
-
|
|
353
|
-
// Use polling to check for selection changes
|
|
341
|
+
|
|
354
342
|
let lastSelectedElement = null;
|
|
355
343
|
const checkSelection = () => {
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
if (selectedItems && selectedItems.length === 1) {
|
|
366
|
-
const currentElement = selectedItems[0].element;
|
|
367
|
-
if (currentElement !== lastSelectedElement) {
|
|
368
|
-
console.log('✨ [Visibility] New selection detected!', currentElement.tagName);
|
|
369
|
-
lastSelectedElement = currentElement;
|
|
370
|
-
this._updateVisibilityPanel();
|
|
371
|
-
}
|
|
372
|
-
} else if (lastSelectedElement !== null) {
|
|
373
|
-
console.log('🔄 [Visibility] Selection cleared');
|
|
374
|
-
lastSelectedElement = null;
|
|
375
|
-
const visibilityDock = this._getDomElement('visibilityDock');
|
|
376
|
-
const content = visibilityDock?.querySelector('#visibility-panel-content');
|
|
377
|
-
if (content) {
|
|
378
|
-
content.innerHTML = '<p style="color:#999;font-style:italic;">Select an element to configure visibility...</p>';
|
|
379
|
-
}
|
|
344
|
+
const pg = this.propertyGrid?.propertyGrid;
|
|
345
|
+
if (!pg) return;
|
|
346
|
+
const selectedItems = pg._selectedItems;
|
|
347
|
+
if (selectedItems && selectedItems.length === 1) {
|
|
348
|
+
const currentElement = selectedItems[0].element;
|
|
349
|
+
if (currentElement !== lastSelectedElement) {
|
|
350
|
+
lastSelectedElement = currentElement;
|
|
351
|
+
this._updateVisibilityPanel().catch(() => {});
|
|
380
352
|
}
|
|
381
|
-
}
|
|
382
|
-
|
|
353
|
+
} else if (lastSelectedElement !== null) {
|
|
354
|
+
lastSelectedElement = null;
|
|
355
|
+
const visibilityDock = this._getDomElement('visibilityDock');
|
|
356
|
+
const content = visibilityDock?.querySelector('#visibility-panel-content');
|
|
357
|
+
if (content)
|
|
358
|
+
content.innerHTML = '<p style="color:#999;font-style:italic;">Select an element to configure visibility...</p>';
|
|
383
359
|
}
|
|
384
360
|
};
|
|
385
|
-
|
|
361
|
+
|
|
386
362
|
setInterval(checkSelection, 500);
|
|
387
|
-
|
|
388
|
-
console.log('✅ [Visibility] Selection polling started (500ms interval)');
|
|
389
|
-
console.log('💡 [Visibility] Test manually: window.updateVisibilityPanel()');
|
|
390
363
|
}
|
|
391
364
|
|
|
392
365
|
async _updateVisibilityPanel() {
|
|
@@ -406,6 +379,11 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
|
|
|
406
379
|
const designItem = selectedItems[0];
|
|
407
380
|
const element = designItem.element;
|
|
408
381
|
|
|
382
|
+
if (!element || typeof element.getAttribute !== 'function') {
|
|
383
|
+
content.innerHTML = '<p style="color:#999;font-style:italic;">Select an element to configure visibility...</p>';
|
|
384
|
+
return;
|
|
385
|
+
}
|
|
386
|
+
|
|
409
387
|
// Read existing signal binding — bind-prop:hidden (hide) or bind-prop:disable (disable)
|
|
410
388
|
const hiddenAttr = element.getAttribute('bind-prop:hidden') || null;
|
|
411
389
|
const disableAttr = element.getAttribute('bind-prop:disable') || null;
|
|
@@ -154,9 +154,14 @@ export class IobrokerWebuiScreenEditor extends BaseCustomWebComponentConstructor
|
|
|
154
154
|
}
|
|
155
155
|
}
|
|
156
156
|
catch (err) {
|
|
157
|
-
console.warn("applyBindings()", err);
|
|
157
|
+
console.warn("applyBindings() properties", err);
|
|
158
|
+
}
|
|
159
|
+
try {
|
|
160
|
+
this._webuiBindings = window.appShell.bindingsHelper.applyAllBindings(this.documentContainer.designerView.designerCanvas.rootDesignItem.element.shadowRoot, this.relativeBindingsPrefix, this.documentContainer.designerView.designerCanvas.rootDesignItem.element);
|
|
161
|
+
}
|
|
162
|
+
catch (err) {
|
|
163
|
+
console.warn("applyBindings() bindings", err);
|
|
158
164
|
}
|
|
159
|
-
this._webuiBindings = window.appShell.bindingsHelper.applyAllBindings(this.documentContainer.designerView.designerCanvas.rootDesignItem.element.shadowRoot, this.relativeBindingsPrefix, this.documentContainer.designerView.designerCanvas.rootDesignItem.element);
|
|
160
165
|
}
|
|
161
166
|
}
|
|
162
167
|
removeBindings() {
|
|
@@ -613,8 +618,6 @@ export class IobrokerWebuiScreenEditor extends BaseCustomWebComponentConstructor
|
|
|
613
618
|
ctx.fillStyle = '#868e96';
|
|
614
619
|
ctx.fillText('Custom Control', 100, 135);
|
|
615
620
|
|
|
616
|
-
// Convert canvas to blob
|
|
617
|
-
console.log('🎨 [Thumbnail] Rendered fallback thumbnail with name:', displayName);
|
|
618
621
|
return new Promise((resolve) => {
|
|
619
622
|
thumbnailCanvas.toBlob(resolve, 'image/png', 0.95);
|
|
620
623
|
});
|
|
@@ -645,23 +648,6 @@ export class IobrokerWebuiScreenEditor extends BaseCustomWebComponentConstructor
|
|
|
645
648
|
this._settingsChanged = window.appShell.settingsEditor.propertyChanged.on(() => {
|
|
646
649
|
this.handlePropertyChanges();
|
|
647
650
|
});
|
|
648
|
-
|
|
649
|
-
// Trigger visibility panel update when selection changes
|
|
650
|
-
try {
|
|
651
|
-
const canvas = this.documentContainer.designerView.designerCanvas;
|
|
652
|
-
if (canvas && canvas.selectionChangedEvent) {
|
|
653
|
-
canvas.selectionChangedEvent.on(() => {
|
|
654
|
-
if (window.appShell._updateVisibilityPanel) {
|
|
655
|
-
window.appShell._updateVisibilityPanel();
|
|
656
|
-
console.log('🎯 [Visibility] Selection changed event fired!');
|
|
657
|
-
}
|
|
658
|
-
});
|
|
659
|
-
} else {
|
|
660
|
-
console.warn('⚠️ [Visibility] Selection event not available on canvas');
|
|
661
|
-
}
|
|
662
|
-
} catch (err) {
|
|
663
|
-
console.error('❌ [Visibility] Error setting up selection listener:', err);
|
|
664
|
-
}
|
|
665
651
|
}
|
|
666
652
|
setWidth(w) {
|
|
667
653
|
this.documentContainer.designerView.designerWidth = w ?? '100%';
|
|
@@ -670,10 +656,8 @@ export class IobrokerWebuiScreenEditor extends BaseCustomWebComponentConstructor
|
|
|
670
656
|
this.documentContainer.designerView.designerHeight = h ?? '100%';
|
|
671
657
|
}
|
|
672
658
|
handlePropertyChanges() {
|
|
673
|
-
this.documentContainer.designerView.designerWidth = this._settings.width ?? '';
|
|
674
|
-
this.documentContainer.designerView.designerHeight = this._settings.height ?? '';
|
|
675
|
-
|
|
676
|
-
console.log('📝 [Screen Editor] Settings changed:', this._settings);
|
|
659
|
+
this.documentContainer.designerView.designerWidth = this._settings.width ?? '100%';
|
|
660
|
+
this.documentContainer.designerView.designerHeight = this._settings.height ?? '100%';
|
|
677
661
|
}
|
|
678
662
|
dispose() {
|
|
679
663
|
this.removeBindings();
|
|
@@ -397,24 +397,11 @@ let ScreenViewer = class ScreenViewer extends BaseCustomWebComponentConstructorA
|
|
|
397
397
|
if (this._screenName && d.type == 'screen' && d.name === this._screenName)
|
|
398
398
|
this._loadScreen();
|
|
399
399
|
});
|
|
400
|
-
console.log('🔗 [ScreenViewer] connectedCallback for "' + this.screenName + '"');
|
|
401
|
-
|
|
402
|
-
// Check if module with default export
|
|
403
400
|
let scriptObj = this._scriptObject;
|
|
404
|
-
if (scriptObj?.default && !scriptObj?.connectedCallback)
|
|
405
|
-
console.log('🔄 [ScreenViewer] Using default export in connectedCallback');
|
|
401
|
+
if (scriptObj?.default && !scriptObj?.connectedCallback)
|
|
406
402
|
scriptObj = scriptObj.default;
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
console.log('🔗 [ScreenViewer] Final scriptObj:', scriptObj);
|
|
410
|
-
console.log('🔗 [ScreenViewer] Has callback?', typeof scriptObj?.connectedCallback);
|
|
411
|
-
|
|
412
|
-
if (scriptObj?.connectedCallback) {
|
|
413
|
-
console.log('✅ [ScreenViewer] Calling connectedCallback for "' + this.screenName + '"');
|
|
403
|
+
if (scriptObj?.connectedCallback)
|
|
414
404
|
scriptObj.connectedCallback(this, this._rootShadow);
|
|
415
|
-
} else {
|
|
416
|
-
console.warn('⚠️ [ScreenViewer] No connectedCallback for "' + this.screenName + '"');
|
|
417
|
-
}
|
|
418
405
|
for (let e of this.#eventListeners) {
|
|
419
406
|
this.addEventListener(e[0], e[1]);
|
|
420
407
|
}
|
package/www/runtime.html
CHANGED
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
|
|
4
4
|
<head>
|
|
5
5
|
<meta charset="utf-8">
|
|
6
|
-
<link rel="manifest" href="./manifest.json">
|
|
7
6
|
<script src="./node_modules/blockly/blockly_compressed.js"></script>
|
|
8
7
|
<script src="./node_modules/blockly/blocks_compressed.js"></script>
|
|
9
8
|
<script src="./node_modules/blockly/javascript_compressed.js"></script>
|