node-red-contrib-room-tools 1.8.16 → 1.9.1

package/panel-binding-editor.js

@@ -7,8 +7,11 @@ function initializeVisualBinding () {
   const base = config.editorEndpoint
   const saved = new Map(Object.entries(config.bindings || {}))
   const meterEntries = [...saved].filter(([, entry]) => entry.readMeta?.meter)
+  const xySeriesEntries = [...saved].filter(([, entry]) => entry.readMeta?.xySeries)
   const meterTargets = new Map()
+  const xySeriesTargets = new Map()
   let meterClient = null, lastMeterFrame = null
+  let xySeriesClient = null, lastXYSeriesFrame = null
   const attached = new WeakSet()
   const feedbackModels = new Map()
   const pendingText = new Map()
@@ -107,25 +110,106 @@ function initializeVisualBinding () {
     }
     return String(node.value)
   }
+  function repeatMarkerFor (node, repeat) {
+    let current = node
+    while (current && current !== root) {
+      if (current.getAttribute?.('data-cp-repeat') === repeat?.locator) {
+        const key = current.getAttribute('data-cp-repeat-key')
+        return key == null ? null : String(key)
+      }
+      current = current.parentElement
+    }
+    return null
+  }
+  function bindingMatchesNode (node, binding) {
+    if (node.getAttribute('data-cp-auto') !== binding.locator) return false
+    if (!binding.repeat) return true
+    return repeatMarkerFor(node, binding.repeat) === String(binding.instanceKey)
+  }
+  function nodesForBinding (binding) {
+    return [...root.querySelectorAll('[data-cp-auto]')].filter(node => bindingMatchesNode(node, binding))
+  }
+  function nodeForBinding (binding) {
+    const matches = nodesForBinding(binding)
+    return matches.length === 1 ? matches[0] : null
+  }
+  function repeatItem (binding) {
+    const repeat = binding.repeat
+    const source = component[repeat.source]
+    if (!Array.isArray(source)) return undefined
+    if (repeat.kind === 'array') return source[Number(binding.instanceKey)]
+    const keyField = repeat.key.slice(repeat.value.length + 1)
+    return source.find(value => value && String(value[keyField]) === String(binding.instanceKey))
+  }
+  function readRepeatField (item, field) {
+    return field.split('.').reduce((value, name) => value == null ? undefined : value[name], item)
+  }
+  function writeRepeatField (item, field, value) {
+    const names = field.split('.')
+    const last = names.pop()
+    let target = item
+    for (const name of names) {
+      if (!target || typeof target !== 'object') return false
+      target = target[name]
+    }
+    if (!target || typeof target !== 'object') return false
+    if (!Object.is(target[last], value)) target[last] = value
+    return true
+  }
+  function repeatModelValue (binding) {
+    if (!binding.repeat || !binding.model) return binding.model ? component[binding.model] : undefined
+    const repeat = binding.repeat
+    const source = component[repeat.source]
+    if (!Array.isArray(source)) return undefined
+    const item = repeatItem(binding)
+    if (repeat.kind === 'array' && binding.model === `${repeat.source}[${repeat.index}]`) return item
+    const prefix = repeat.value + '.'
+    const indexedPrefix = repeat.index ? `${repeat.source}[${repeat.index}].` : ''
+    const field = binding.model.startsWith(prefix) ? binding.model.slice(prefix.length)
+      : indexedPrefix && binding.model.startsWith(indexedPrefix)
+        ? binding.model.slice(indexedPrefix.length) : ''
+    return item && field ? readRepeatField(item, field) : undefined
+  }
+  function setRepeatModel (binding, value) {
+    if (!binding.repeat || !binding.model) return false
+    const repeat = binding.repeat
+    const source = component[repeat.source]
+    if (!Array.isArray(source)) return false
+    const item = repeatItem(binding)
+    const prefix = repeat.value + '.'
+    const indexedPrefix = repeat.index ? `${repeat.source}[${repeat.index}].` : ''
+    const field = binding.model.startsWith(prefix) ? binding.model.slice(prefix.length)
+      : indexedPrefix && binding.model.startsWith(indexedPrefix)
+        ? binding.model.slice(indexedPrefix.length) : ''
+    if (field) {
+      return writeRepeatField(item, field, value)
+    }
+    if (repeat.kind !== 'array' || binding.model !== `${repeat.source}[${repeat.index}]`) return false
+    const index = Number(binding.instanceKey)
+    if (!Number.isInteger(index) || index < 0 || index >= source.length) return false
+    if (!Object.is(source[index], value)) source[index] = value
+    return true
+  }
   function showFeedback () {
     for (const [id, binding] of saved) {
-      if (binding.mode === 'write' || binding.readMeta?.meter) continue
-      const matches = root.querySelectorAll('[data-cp-auto="' + binding.locator + '"]')
-      if (matches.length !== 1) continue
+      if (binding.mode === 'write' || binding.readMeta?.meter || binding.readMeta?.xySeries) continue
+      const node = nodeForBinding(binding)
+      if (!node) continue
       if (!Object.prototype.hasOwnProperty.call(component.boundState, id)) continue
       const value = component.boundDisplayValue(id, component.boundState[id])
-      const node = matches[0]
       const displayValue = ['range', 'meter'].includes(binding.adapter)
         ? mappedValue(Number(value), binding.readMeta || binding.writeMeta,
           numericRange(binding, node)) : value
       if (binding.model) {
         if (binding.component && binding.adapter === 'text-input' &&
           (pendingText.has(id) || node.contains?.(document.activeElement))) continue
-        if (binding.model in component && !component.$options?.computed?.[binding.model]) {
-          if (!Object.is(component[binding.model], displayValue)) {
+        const current = repeatModelValue(binding)
+        if (binding.repeat || (binding.model in component && !component.$options?.computed?.[binding.model])) {
+          if (!Object.is(current, displayValue)) {
             pendingText.delete(id)
             if (binding.component) feedbackModels.set(id, displayValue)
-            component[binding.model] = displayValue
+            if (binding.repeat) setRepeatModel(binding, displayValue)
+            else component[binding.model] = displayValue
             if (binding.component && component.$nextTick) {
               void component.$nextTick(() => {
                 if (Object.is(feedbackModels.get(id), displayValue)) feedbackModels.delete(id)
@@ -151,11 +235,12 @@ function initializeVisualBinding () {
   function attachControls () {
     for (const node of root.querySelectorAll('[data-cp-auto]')) {
       if (attached.has(node)) continue
-      attached.add(node)
       const locator = node.getAttribute('data-cp-auto')
-      const matched = [...saved].find(([, entry]) => entry.locator === locator)
+      const matched = [...saved].find(([, entry]) => bindingMatchesNode(node, entry))
       if (!matched) continue
       const [id, binding] = matched
+      if (nodeForBinding(binding) !== node) continue
+      attached.add(node)
       if (binding.mode === 'read') continue
       if (binding.component) {
         if (binding.adapter === 'text-input') {
@@ -198,19 +283,23 @@ function initializeVisualBinding () {
       } else node.addEventListener('change', () => send(true))
     }
     if (meterEntries.length) {
-      const locators = new Map()
-      for (const node of root.querySelectorAll('[data-cp-auto]')) {
-        const locator = node.getAttribute('data-cp-auto')
-        locators.set(locator, locators.has(locator) ? null : node)
-      }
       meterTargets.clear()
       for (const [id, binding] of meterEntries) {
-        const node = locators.get(binding.locator)
+        const node = nodeForBinding(binding)
         if (node) meterTargets.set(id, { node, binding })
       }
       if (lastMeterFrame) applyMeterFrame(lastMeterFrame.frame, lastMeterFrame.ids)
       else invalidateMeters()
     }
+    if (xySeriesEntries.length) {
+      xySeriesTargets.clear()
+      for (const [id, binding] of xySeriesEntries) {
+        const node = nodeForBinding(binding)
+        if (node) xySeriesTargets.set(id, { node, binding })
+      }
+      if (lastXYSeriesFrame) applyXYSeriesFrame(lastXYSeriesFrame.frame, lastXYSeriesFrame.ids)
+      else invalidateXYSeries()
+    }
     showFeedback()
   }
   function applyMeterFrame (frame, ids) {
@@ -224,7 +313,8 @@ function initializeVisualBinding () {
       if (!frame.valid[index]) continue
       const value = mappedValue(frame.values[index], binding.readMeta, numericRange(binding, node))
       if (binding.model) {
-        if (binding.model in component && !component.$options?.computed?.[binding.model]) component[binding.model] = value
+        if (binding.repeat) setRepeatModel(binding, value)
+        else if (binding.model in component && !component.$options?.computed?.[binding.model]) component[binding.model] = value
       } else node.value = value
     }
   }
@@ -235,6 +325,32 @@ function initializeVisualBinding () {
       node.setAttribute('aria-invalid', 'true')
     }
   }
+  function applyXYSeriesFrame (frame, ids) {
+    lastXYSeriesFrame = { frame, ids }
+    for (let index = 0; index < ids.length; index++) {
+      const target = xySeriesTargets.get(ids[index])
+      if (!target) continue
+      const { node, binding } = target
+      node.setAttribute('data-cpv-xy-series-valid', String(frame.valid[index]))
+      node.setAttribute('data-cpv-xy-series-seq', String(frame.seq))
+      const points = frame.valid[index] ? frame.values[index].map(point => point.slice()) : []
+      if (binding.model) {
+        if (binding.repeat) setRepeatModel(binding, points)
+        else if (binding.model in component && !component.$options?.computed?.[binding.model]) component[binding.model] = points
+      }
+    }
+  }
+  function invalidateXYSeries () {
+    lastXYSeriesFrame = null
+    for (const { node, binding } of xySeriesTargets.values()) {
+      node.setAttribute('data-cpv-xy-series-valid', 'false')
+      node.setAttribute('aria-invalid', 'true')
+      if (binding.model) {
+        if (binding.repeat) setRepeatModel(binding, [])
+        else if (binding.model in component && !component.$options?.computed?.[binding.model]) component[binding.model] = []
+      }
+    }
+  }
   function attachModelControls () {
     for (const [id, binding] of saved) {
       if (!binding.component || !binding.model || binding.mode === 'read') continue
@@ -271,7 +387,9 @@ function initializeVisualBinding () {
           console.error('ControlPanel binding command failed', error)
         }
       }
-      const unwatch = component.$watch(binding.model, value => {
+      const unwatch = component.$watch(
+        binding.repeat ? () => repeatModelValue(binding) : binding.model,
+        value => {
         if (feedbackModels.has(id)) {
           const feedbackValue = feedbackModels.get(id)
           feedbackModels.delete(id)
@@ -287,21 +405,25 @@ function initializeVisualBinding () {
           clearTimeout(finishTimer)
           finishTimer = setTimeout(() => send(value, true), 160)
         } else send(value, true)
-      })
+        })
       cleanup.push(() => { clearTimeout(finishTimer); unwatch() })
     }
   }
   function closeOverlay () { overlay?.remove(); overlay = null }
+  function sameBindingTarget (entry, candidate) {
+    return entry.locator === candidate.locator &&
+      (!candidate.repeat || String(entry.instanceKey) === String(candidate.instanceKey))
+  }
   function updateBindingMarkers () {
     for (const node of root.querySelectorAll('[data-cpv-bound="true"]')) {
       node.removeAttribute('data-cpv-bound')
       node.removeAttribute('data-cpv-binding-id')
     }
     if (!editing || !editSession) return
-    const bindings = new Map(draft.map(entry => [entry.locator, entry]))
     for (const node of root.querySelectorAll('[data-cp-auto]')) {
-      const entry = bindings.get(node.getAttribute('data-cp-auto'))
+      const entry = draft.find(item => bindingMatchesNode(node, item))
       if (!entry) continue
+      if (nodeForBinding(entry) !== node) continue
       node.setAttribute('data-cpv-bound', 'true')
       node.setAttribute('data-cpv-binding-id', entry.id)
     }
@@ -310,10 +432,10 @@ function initializeVisualBinding () {
     closeOverlay()
     overlay = element('div', null, 'cpv-menu')
     overlay.setAttribute('role', 'menu')
-    const existing = draft.find(entry => entry.locator === candidate.locator)
+    const existing = draft.find(entry => sameBindingTarget(entry, candidate))
     overlay.append(button(existing ? 'Edit binding' : 'Bind control', () => bindingDialog(candidate)))
     if (existing) overlay.append(button('Remove binding', () => {
-      draft = draft.filter(entry => entry.locator !== candidate.locator)
+      draft = draft.filter(entry => !sameBindingTarget(entry, candidate))
       updateBindingMarkers()
       closeOverlay()
       inform('Binding removed from draft')
@@ -457,14 +579,17 @@ function initializeVisualBinding () {
   }
   async function bindingDialog (candidate, options = {}) {
     const returnToBindings = options.returnToBindings === true
-    const existing = draft.find(entry => entry.locator === candidate.locator)
+    const existing = draft.find(entry => sameBindingTarget(entry, candidate))
     const dialog = showDialog(existing ? 'Edit binding' : 'Bind control')
     const form = element('form')
     const name = field(form, 'Name', element('input'))
-    name.value = existing?.label || candidate.label
+    name.value = existing?.label || (candidate.repeat ? `${candidate.label} [${candidate.instanceKey}]` : candidate.label)
     name.maxLength = 80
     const id = field(form, 'Control ID', element('input'))
-    id.value = existing?.id || 'control.' + candidate.locator.slice(-12)
+    const instanceSuffix = candidate.repeat
+      ? '.' + String(candidate.instanceKey).replace(/[^A-Za-z0-9._/-]/g, '-').slice(0, 48)
+      : ''
+    id.value = existing?.id || 'control.' + candidate.locator.slice(-12) + instanceSuffix
     const modeOptions = ['meter', 'text-display'].includes(candidate.adapter)
       ? ['read'] : ['both', 'write', 'read']
     const mode = field(form, 'Mode', choose('Mode', modeOptions.map(value => ({ value, text: value })), existing?.mode || modeOptions[0]))
@@ -532,7 +657,7 @@ function initializeVisualBinding () {
     const actions = element('div', null, 'cpv-actions')
     actions.append(button('Cancel', () => finishBindingEdit(returnToBindings)))
     if (existing) actions.append(button('Remove', () => {
-      draft = draft.filter(entry => entry.locator !== candidate.locator)
+      draft = draft.filter(entry => !sameBindingTarget(entry, candidate))
       finishBindingEdit(returnToBindings)
       inform('Binding removed from draft')
     }))
@@ -543,7 +668,7 @@ function initializeVisualBinding () {
     form.addEventListener('submit', event => {
       event.preventDefault()
       if (!/^[A-Za-z][A-Za-z0-9._/-]{0,127}$/.test(id.value) ||
-        draft.some(entry => entry.id === id.value && entry.locator !== candidate.locator)) {
+        draft.some(entry => entry.id === id.value && !sameBindingTarget(entry, candidate))) {
         message.textContent = 'Control ID must be unique and valid'; return
       }
       if (!name.value.trim() || !device.value || (mode.value !== 'read' && !write.value) ||
@@ -553,12 +678,13 @@ function initializeVisualBinding () {
       const entry = {
         id: id.value, locator: candidate.locator, adapter: candidate.adapter,
         ...(candidate.model ? { model: candidate.model } : {}),
+        ...(candidate.repeat ? { repeat: candidate.repeat, instanceKey: String(candidate.instanceKey) } : {}),
         label: name.value.trim(), mode: mode.value, device: device.value,
         writePath: mode.value === 'read' ? '' : write.value,
         readPath: mode.value === 'write' ? '' : read.value,
         onebased: numbering.value === 'true'
       }
-      draft = draft.filter(item => item.locator !== candidate.locator)
+      draft = draft.filter(item => !sameBindingTarget(item, candidate))
       draft.push(entry)
       updateBindingMarkers()
       finishBindingEdit(returnToBindings)
@@ -612,6 +738,8 @@ function initializeVisualBinding () {
       const position = (order.get(a.locator) ?? Number.MAX_SAFE_INTEGER) -
         (order.get(b.locator) ?? Number.MAX_SAFE_INTEGER)
       if (position) return position
+      const instancePosition = String(a.instanceKey || '').localeCompare(String(b.instanceKey || ''))
+      if (instancePosition) return instancePosition
       return String(a.id).localeCompare(String(b.id))
     })
   }
@@ -626,10 +754,11 @@ function initializeVisualBinding () {
         details.append(element('span', path, 'cpv-binding-path'))
         row.append(details)
         const actions = element('div', null, 'cpv-binding-actions')
-        const candidate = snapshot.candidates.find(item => item.locator === entry.locator && item.supported)
+        const baseCandidate = snapshot.candidates.find(item => item.locator === entry.locator && item.supported)
+        const candidate = baseCandidate?.repeat ? { ...baseCandidate, instanceKey: entry.instanceKey } : baseCandidate
         const edit = button('Edit', () => bindingDialog(candidate, { returnToBindings: true }))
-        edit.disabled = !candidate
-        if (!candidate) edit.title = 'This control is no longer available on the page'
+        edit.disabled = !candidate || !nodeForBinding(entry)
+        if (edit.disabled) edit.title = 'This control is no longer available on the page'
         actions.append(edit)
         actions.append(button('Remove', () => {
           draft = draft.filter(item => item.id !== entry.id)
@@ -650,9 +779,17 @@ function initializeVisualBinding () {
   function candidateFromEvent (event) {
     const node = event.target?.closest?.('[data-cp-auto]')
     if (!node || !root.contains(node) || !snapshot) return null
-    const candidate = snapshot.candidates.find(item => item.locator === node.getAttribute('data-cp-auto'))
-    if (!candidate?.component || !candidate.model) return candidate
-    const value = component[candidate.model]
+    const baseCandidate = snapshot.candidates.find(item => item.locator === node.getAttribute('data-cp-auto'))
+    if (!baseCandidate) return null
+    const instanceKey = baseCandidate.repeat ? repeatMarkerFor(node, baseCandidate.repeat) : undefined
+    const candidate = baseCandidate.repeat
+      ? { ...baseCandidate, ...(instanceKey == null ? {} : { instanceKey }) }
+      : baseCandidate
+    if (candidate.repeat && instanceKey == null) {
+      return { ...candidate, supported: false, reason: 'Repeated control instance key is unavailable' }
+    }
+    if (!candidate.component || !candidate.model) return candidate
+    const value = candidate.repeat ? repeatModelValue(candidate) : component[candidate.model]
     if (value == null) return candidate
     if (candidate.adapter === 'switch' && typeof value !== 'boolean') {
       return { ...candidate, supported: false, reason: 'This Vuetify switch needs a boolean v-model field' }
@@ -663,6 +800,9 @@ function initializeVisualBinding () {
     if (candidate.adapter === 'meter' && (typeof value !== 'number' || !Number.isFinite(value))) {
       return { ...candidate, supported: false, reason: 'This Vuetify progress needs a numeric model field' }
     }
+    if (candidate.adapter === 'xy-series' && !Array.isArray(value)) {
+      return { ...candidate, supported: false, reason: 'This realtime array control needs an array model field' }
+    }
     if (candidate.adapter === 'select' && typeof value !== 'string' &&
       !(typeof value === 'number' && Number.isFinite(value))) {
       return { ...candidate, supported: false, reason: 'This Vuetify selection needs one scalar model field' }
@@ -723,6 +863,25 @@ function initializeVisualBinding () {
       }))
     } catch (error) { console.error('ControlPanel meter initialization failed', error) }
   }
+  if (this.__boundPanelConfig().xySeries && xySeriesEntries.length) {
+    try {
+      const ids = xySeriesEntries.map(([id]) => id).sort((a, b) => a.localeCompare(b))
+      xySeriesClient = this.__createPanelXYSeriesClient({ socket: this.$socket,
+        panelId: config.panelId, room: this.__boundPanelConfig().room, ids,
+        request: (...args) => component.__panelFetch(...args),
+        createReceiver: this.__createXYSeriesReceiver, createRenderer: this.__createXYSeriesRenderer,
+        apply: applyXYSeriesFrame, invalidate: invalidateXYSeries,
+        onUnauthorized: () => {
+          if (editing) { editSession = null; loginView() }
+          else component.clearBoundPanelSession()
+        } })
+      cleanup.push(() => xySeriesClient.close())
+      if (!editing) cleanup.push(this.$watch('boundAuthenticated', authenticated => {
+        xySeriesClient.setAuth(authenticated ? { endpoint: component.__boundPanelConfig().endpoint,
+          csrf: component.__boundPanelSession.csrf, header: 'X-Room-CSRF' } : null)
+      }))
+    } catch (error) { console.error('ControlPanel xy-series initialization failed', error) }
+  }
   observer = new MutationObserver(() => {
     attachControls()
     updateBindingMarkers()

package/panel-meter.js

@@ -188,7 +188,8 @@ function createPanelMeter ({ panelId, room, bindings, hub, onSubscribe = () => {
         subscribers.set(socket.id, { socket, active: entry.active, disconnect })
         socket.on('disconnect', disconnect)
         socket.emit('control-panel:meter-ready', layout)
-        emitFrame(socket, hub.snapshot(panelId))
+        const initial = hub.snapshot(panelId)
+        emitFrame(socket, initial)
         onSubscribe()
       },
       'control-panel:meter-unsubscribe': (socket, id) => { if (id === panelId) remove(socket.id) }