@feezal/feezal-element 0.8.0 → 3.0.1

package/feezal-element.js

@@ -1,122 +1,185 @@
-/* global window, feezal */
+/* global feezal */
+import {LitElement, html, css} from 'lit';
+import {FeezalConditions} from './feezal-conditions.js';
 
-import {PolymerElement, html} from '@polymer/polymer/polymer-element.js';
+/**
+ * Shared base styles — identical to the Polymer dom-module 'feezal-style-element'.
+ * Exported so subclasses can compose via:
+ *   static styles = [FeezalElementLit.styles, css`...additional...`];
+ */
+export const feezalBaseStyles = css`
+    :host {
+        display: inline-block;
+        box-sizing: border-box;
+        overflow: hidden;
+    }
+    :host([hidden]) {
+        display: none;
+    }
+    :host(.feezal-editable) {
+        outline: 1px dashed rgba(var(--feezal-selection-rgb, 2,132,199), 0.8);
+    }
+    :host(.feezal-editable) * {
+        pointer-events: none;
+    }
+    :host(.feezal-editable.feezal-selected) {
+        outline: 2px dashed rgba(var(--feezal-selection-rgb, 2,132,199), 0.9);
+    }
+`;
 
-const styleElement = document.createElement('dom-module');
+/**
+ * FeezalElement — Lit base class for feezal elements.
+ *
+ * A faithful port of the Polymer-based FeezalPolymerElement to Lit 3.
+ * Paper elements keep importing the Polymer FeezalPolymerElement unchanged;
+ * only the basic-* elements use this class.
+ *
+ * Key differences from the Polymer base:
+ *   - Subclass CSS goes in static styles = [FeezalElement.styles, css`...`]
+ *   - Polymer observers become updated(changed) guards
+ *   - this.$.id becomes this.renderRoot.querySelector('#id')
+ *   - Lit needs explicit attribute: 'kebab-name' for camelCase properties
+ */
+export class FeezalElement extends LitElement {
+    static styles = feezalBaseStyles;
 
-styleElement.innerHTML =
-    `<template>
-       <style>
-        :host {
-            display: inline-block;
-            box-sizing: border-box;
-            overflow: hidden;
-        }
-        :host([hidden]) {
-            display: none;
-        }
-        :host(.feezal-editable) {
-            outline: 1px dashed rgba(250, 120, 0, 0.8);
-        }
-        :host(.feezal-editable) * {
-            pointer-events: none;
-        }
-        :host(.feezal-editable.feezal-selected) {
-            outline: 2px dashed rgba(250, 120, 0, 0.8);
-        }
-       </style>
-     </template>`;
+    static get feezal() {
+        return {attributes: [], styles: []};
+    }
 
-styleElement.register('feezal-style-element');
+    static properties = {
+        // NOTE: Lit does NOT auto-convert camelCase to kebab-case for attribute
+        // names (unlike Polymer).  Each camelCase property needs an explicit
+        // attribute option so that saved views (which store kebab-case) are
+        // read back correctly.
+        subscribe:            {type: String,  reflect: true, attribute: 'subscribe'},
+        messageProperty:      {type: String,  reflect: true, attribute: 'message-property'},
+        dynamicSubscriptions: {type: Boolean, reflect: true, attribute: 'dynamic-subscriptions'},
+        visible:              {type: Boolean, reflect: true},
+        // E50: JSON list of condition rows (visibility/class/style/attribute
+        // bound to MQTT topics). Never reflected — the attribute is the
+        // source of truth; effects only apply in the viewer.
+        conditions:           {type: String,  attribute: 'conditions'},
+    };
 
-class FeezalElement extends PolymerElement {
-    static get properties() {
-        return {
-            name: {
-                type: String,
-                value: '',
-                reflectToAttribute: true,
-            },
-            'selected': {
-                type: Boolean,
-                value: false
-            },
-            subscribeTopic: {
-                type: String,
-                value: '',
-                reflectToAttribute: true,
-            },
-            messageProperty: {
-                type: String,
-                value: 'payload',
-                reflectToAttribute: true,
-            },
-            'dynamicSubscriptions': {
-                type: Boolean,
-                value: false,
-                reflectToAttribute: true
-            },
-            'visible': {
-                type: Boolean,
-                value: false,
-                observer: '_visibleChanged'
-            }
-        }
+    constructor() {
+        super();
+        this._subscriptions = [];
+        this._subscribed = false;
+        this.messageProperty = 'payload';
+        this.dynamicSubscriptions = false;
+        this.visible = false;
+        this._conditions = new FeezalConditions(this);
     }
-    static get feezal() {
-        return {
-            attributes: [],
-            styles: []
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add('feezal-element');
+        if (this.visible || !this.dynamicSubscriptions) {
+            this._subscribe();
+            this._conditions.connect();
         }
     }
 
-    _payloadCast(type, payload) {
-        if (typeof payload === 'string') {
-            switch (type) {
-                case Boolean:
-                    return Number(payload) !== 0 && payload.toLowerCase() !== 'false';
-                default:
-                    return payload;
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._unsubscribe();
+        this._conditions.disconnect();
+    }
+
+    updated(changed) {
+        if (changed.has('visible') && this.dynamicSubscriptions) {
+            if (this.visible) {
+                this._subscribe();
+                this._conditions.connect();
+            } else {
+                this._unsubscribe();
+                this._conditions.disconnect();
             }
-        } else {
-            return payload;
+        }
+
+        // E50: conditions added/edited/removed at runtime → restart the
+        // engine. connect() is idempotent for an unchanged attribute, so the
+        // first update after mount is a no-op.
+        if (changed.has('conditions') && (this.visible || !this.dynamicSubscriptions)) {
+            this._conditions.connect();
         }
     }
 
-    subscribe(topic, callback) {
-        this._subscriptions.push(feezal.connection.subscribe(topic, callback));
+    // ── Subscription helpers ─────────────────────────────────────────────────
+
+    /** Subscribe to a single topic — convenience wrapper for subclasses. */
+    addSubscription(topic, callback) {
+        this._subscriptions.push(feezal.connection.sub(topic, callback));
     }
 
     _subscribe() {
-        if (!this.subscribeTopic) {
+        // The _subscribed guard makes this idempotent: an element that mounts
+        // with visible already set (the attribute reflects, so it can arrive
+        // from saved view HTML) hits _subscribe from both connectedCallback
+        // and the first updated() — without the guard every topic would be
+        // subscribed twice and each message processed twice.
+        if (!this.subscribe || this._subscribed) {
             return;
         }
 
+        // In the editor, runtime MQTT manipulation of elements is gated by a user
+        // setting (Editor settings → "Prevent MQTT element manipulation in editor",
+        // default ON) so live broker values never get written onto elements and
+        // serialized into the saved view.
+        if (feezal.isEditor && feezal.preventEditorMqtt !== false) {
+            return;
+        }
+
+        this._subscribed = true;
+
+        const base      = this.subscribe;
         const elemClass = window.customElements.get(this.localName);
 
-        this._subscriptions.push(feezal.connection.subscribe(this.subscribeTopic + '/#', msg => {
-            let key;
-            if (msg.topic === this.subscribeTopic && elemClass.feezal) {
-                key = elemClass.feezal.baseAttribute;
-            } else {
-                key = msg.topic.split('/').pop();
-            }
+        // Primary state topic → baseAttribute (exact topic, no wildcard).
+        const baseAttribute = elemClass?.feezal?.baseAttribute;
+        if (baseAttribute) {
+            this._subscriptions.push(feezal.connection.sub(base, msg => {
+                const type = (elemClass.properties?.[baseAttribute] || {}).type;
+                const val  = this._payloadCast(type, this.getProperty(msg, this.messageProperty));
+                if (type === Boolean && !val) {
+                    this.removeAttribute(baseAttribute);
+                } else {
+                    this.setAttribute(baseAttribute, val);
+                }
+            }));
+        }
 
-            const type = (elemClass.properties[key] || {}).type;
+        // Reserved runtime-control channel — distinct, exact topics so device
+        // telemetry sharing the base topic can never reach the element.
+        // Consistent with feezal-view / feezal-site addclass / removeclass.
+        this._subscribeControl(base);
+    }
 
-            const val = this._payloadCast(key === 'style' ? Object : type, this.getProperty(msg, this.messageProperty));
-   
-            if (key === 'style') {
-                Object.assign(this.style, msg.payload);
-            } else if (type === Boolean && !val) {
-                this.removeAttribute(key);
-            } else {
-                this.setAttribute(key, val);
+    /** Subscribe to the reserved <base>/{setattribute,removeattribute,setstyle,removestyle,addclass,removeclass} control topics. */
+    _subscribeControl(base) {
+        const sub  = (suffix, cb) => this._subscriptions.push(feezal.connection.sub(base + '/' + suffix, cb));
+        const val  = msg => this.getProperty(msg, this.messageProperty);
+        const list = p => (Array.isArray(p) ? p : String(p).split(/[,\s]+/)).filter(Boolean);
+
+        sub('setattribute', msg => {
+            const obj = val(msg);
+            if (obj && typeof obj === 'object') {
+                for (const [k, v] of Object.entries(obj)) this.setAttribute(k, String(v));
             }
-        }));
+        });
+        sub('removeattribute', msg => list(val(msg)).forEach(n => this.removeAttribute(n)));
+        sub('setstyle', msg => {
+            const obj = val(msg);
+            if (obj && typeof obj === 'object') Object.assign(this.style, obj);
+        });
+        sub('removestyle', msg => list(val(msg)).forEach(n => this.style.removeProperty(n)));
+        sub('addclass', msg => this.classList.add(val(msg)));
+        sub('removeclass', msg => this.classList.remove(val(msg)));
     }
 
     _unsubscribe() {
+        this._subscribed = false;
         const sub = this._subscriptions.shift();
         if (sub) {
             feezal.connection.unsubscribe(sub);
@@ -124,146 +187,72 @@ class FeezalElement extends PolymerElement {
         }
     }
 
-    constructor() {
-        super();
-        this._subscriptions = [];
-    }
+    // ── Utilities (ported 1:1 from the Polymer base) ─────────────────────────
 
-    connectedCallback() {
-        super.connectedCallback();
-        this.classList.add('feezal-element');
-        if (feezal.isEditor) {
-            /*
-            if (!this.shadowRoot.querySelector('.feezal-blocker')) {
-                const el = document.createElement('div');
-                el.className = 'feezal-blocker';
-                this.shadowRoot.prepend(el);
-            }
-             */
-            this.shadowRoot.querySelectorAll('*').forEach(el => {
-                if (el.hasAttribute('tabindex')) {
-                    el.addEventListener('focus', event => {
-                        event.preventDefault();
-                        if (event.relatedTarget) {
-                            event.relatedTarget.focus();
-                        } else {
-                            event.currentTarget.blur();
-                        }
-                    });
-                    el.setAttribute('tabindex', '-1');
-                }
-            });
-        } else {
-            if (this.visible || !this.dynamicSubscriptions) {
-                this._subscribe();
-            }
-        }
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this._unsubscribe();
-    }
-
-    _visibleChanged(visible) {
-        if (feezal.isEditor || !this.dynamicSubscriptions) {
-            return;
-        }
-        if (visible) {
-            this._subscribe();
-        } else {
-            this._unsubscribe();
+    _payloadCast(type, payload) {
+        if (typeof payload === 'string' && type === Boolean) {
+            return Number(payload) !== 0 && payload.toLowerCase() !== 'false';
         }
+        return payload;
     }
 
-    // Utils
     throttle(func, limit) {
         let lastFunc;
         let lastRan;
         return function () {
             const context = this;
-            const args = arguments;
-
+            const args    = arguments;
             if (!lastRan) {
                 func.apply(context, args);
                 lastRan = Date.now();
             } else {
                 clearTimeout(lastFunc);
-                this._inThrottle = true;
                 lastFunc = setTimeout(function () {
                     if ((Date.now() - lastRan) >= limit) {
                         func.apply(context, args);
                         lastRan = Date.now();
-                        this._inThrottle = false;
                     }
                 }, limit - (Date.now() - lastRan));
             }
-        }
+        };
     }
 
-    /**
-     * @method split
-     * Split str by '.' - supports backslash escaped delimiters
-     * @param {string} str
-     * @returns {Array.<string>}
-     */
     split(str) {
         str = String(str);
-
-        // Use native split if possible
         if (str.indexOf('\\') === -1) {
             return str.split('.');
         }
-
-        var res = []; // The result array
-        var pos = 0;  // Starting position of current chunk
-
+        const res = [];
+        let pos = 0;
         function chunk(start, end) {
-            // Slice, unescape and push onto result array.
             res.push(str.slice(start, end).replace(/\\\\/g, '\\').replace(/\\\./g, '.'));
-            // Set starting position of next chunk.
             pos = end + 1;
         }
-
-        var esc; // Boolean indicating if a dot is escaped
-        var j;
-        var i;
-        var l = str.length;
+        let esc, j;
+        const l = str.length;
+        let i;
         for (i = 0; i < l; i++) {
             if (str[i] === '.') {
                 esc = false;
-                // Walk over preceding backslashes in reverse direction
                 for (j = i - 1; str[j] === '\\'; j--) {
                     esc = !esc;
                 }
-                // Dot is escaped only if preceded by an odd number of backslashes
                 if (!esc) {
                     chunk(pos, i);
                 }
             }
         }
-
         chunk(pos, i);
-
         return res;
     }
 
-     /**
-     * @method getProperty
-     * get an objects property. supports nested properties through dot-notation, dots may be escaped by backslash
-     * @param {Object} obj
-     * @param {string} prop
-     * @returns {all} the properties value or undefined
-     */
     getProperty(obj, prop) {
-        var type = typeof obj;
+        const type = typeof obj;
         if (type !== 'object' && type !== 'function') {
-            if (typeof prop === 'undefined') {
-                return obj;
-            }
-            return undefined;
+            return typeof prop === 'undefined' ? obj : undefined;
         }
-        var arr = this.split(String(prop));
-        var res = obj;
+        const arr = this.split(String(prop));
+        let res = obj;
         for (let i = 0, l = arr.length; i < l; i++) {
             if (res) {
                 res = res[arr[i]];
@@ -273,6 +262,5 @@ class FeezalElement extends PolymerElement {
     }
 }
 
-window.customElements.define('feezal-element', FeezalElement);
-
-export {FeezalElement, html};
+// Re-export so element files can do a single import.
+export {html, css};