node-red-contrib-room-tools 1.8.8 → 1.8.15

package/CONTROL_PANEL_AI_GUIDE.md

@@ -1,6 +1,6 @@
 # ControlPanel 前端页面编写指南
 
-适用基线：`node-red-contrib-room-tools@1.8.8` 的 `ui-control-panel`，Dashboard 2，Vue Options API。本文按当前代码审核，不表示支持任意 Vue、Vuetify 或第三方组件。
+适用基线：`node-red-contrib-room-tools@1.8.9` 的 `ui-control-panel`，当前本地修订为 `node-red-contrib-room-tools@1.8.15`，Dashboard 2，Vue Options API。本文按当前代码审核，不表示支持任意 Vue、Vuetify 或第三方组件。
 
 给 AI 编写页面前阅读本文。目标是：页面作者只写普通前端页面；部署人员在网页编辑模式选择设备与点位；ControlPanel 保存映射并负责设备命令、反馈和网页侧量程换算。
 
@@ -137,14 +137,14 @@ export default {
 ## 5. 部署与绑定
 
 1. 将页面粘贴到 `ui-control-panel` Template，选择 Dashboard 页面，设置 Room ID、普通账号及独立的编辑账号。普通账号密码至少 12 个字符；账号密码由节点配置，不能写入 H5。保存并 Deploy。
-2. 重新打开节点，点击 `Open page binding editor`，用编辑账号登录。Select 默认激活，可以点击、右键或触屏长按可绑定控件。
+2. 重新打开节点，点击 `Open binding editor`，用编辑账号登录。Select 默认激活，可以点击、右键或触屏长按可绑定控件。`Open page` 打开普通控制页面，使用普通用户账号登录。
 3. 选择在线设备、模式、Write point、Feedback point、编号方式，保存草稿。草稿和亮紫色边框不表示已部署；边框只在编辑模式显示。
-4. 点 Apply。节点检查当前模板、目录参数和 Flow 版本，备份后替换该面板此前生成的桥接并部署。不会无限追加旧桥接，也不会清除其他面板的绑定。Apply 成功后仍在编辑页，无需再次登录。
+4. 点 Apply。节点检查当前模板、目录参数和 Flow 版本，备份后替换该面板此前生成的桥接并保存。Apply 不替用户 Deploy；当 Automator 报告外部 Flow 变化时，编辑器只刷新一次 Flow 页面，之后由用户检查并手动 Deploy。不会无限追加旧桥接，也不会清除其他面板的绑定。Apply 成功后仍在编辑页，无需再次登录。
 5. 点 Exit，回到普通页面登录页，再输入普通账号密码。普通账号不能进入编辑模式；不登录不能操作设备。进程重启或凭据变化可能要求重新登录。
 
 Bindings 列表可 Edit 或 Remove；这些操作先改草稿，最后统一 Apply。从列表进入 Edit，保存或取消后返回列表。刷新、离开或重启前先 Apply，避免草稿丢失。
 
-普通 Deploy 不能替代网页 Apply。Template 改动可能使已保存控件失效；重新 Deploy 后检查绑定。Apply 提示 Flow/Template changed 时重新载入编辑页后再检查，不能靠重复点击覆盖他人的部署。
+普通 Deploy 不能替代网页 Apply。Template 改动可能使已保存控件失效；重新 Deploy 后检查绑定。Apply 的原有模板、目录、Flow 版本和输入校验保持不变；Flow 页面刷新不自动合并画布改动，也不自动 Deploy。
 
 设备必须在线且当前运行环境的 AMX 目录可返回参数，才能查询或重新 Apply 相关绑定。已保存映射在 Flow 中，启动和显示页面不要求驱动在线；但断线时不能保证设备控制或新反馈。Mac 安装模块不等于 MUSE 已安装，Push 也不等于复制本地 node_modules。部署模块属于运行环境操作，不属于前端开发职责。
 

package/README.md

@@ -4,7 +4,7 @@ This package provides `ui-control-panel` for Node-RED and MUSE Automator.
 
 ## ControlPanel
 
-The page author writes ordinary HTML/CSS/Vue and pastes it into the `ui-control-panel` Template. After configuring a Dashboard page, room ID, control login, and separate editor login, save and Deploy. Reopen the node and select **Open page binding editor**. Sign in with the editor account, right-click a supported control, choose its device points, and Apply.
+The page author writes ordinary HTML/CSS/Vue and pastes it into the `ui-control-panel` Template. After configuring a Dashboard page, room ID, control login, and separate editor login, save and Deploy. Reopen the node and select **Open binding editor**. Sign in with the editor account, right-click a supported control, choose its device points, and Apply. **Open page** opens the normal control page with its separate user login.
 
 Both logins work over HTTP on a trusted local network. HTTPS is recommended for other networks because HTTP transmits credentials without encryption. Session cookies are marked `Secure` when the connection uses HTTPS.
 
@@ -16,7 +16,7 @@ Vuetify adapters cover `v-slider`, `v-switch`, `v-checkbox`, `v-select`, `v-radi
 
 Use paired Vuetify tags in Dashboard templates, such as `<v-slider></v-slider>`; self-closing component tags can absorb the following controls during Dashboard rendering and are rejected before deployment.
 
-After clicking Apply in the page binding editor, the package validates the mapping, backs up the active Flow, generates the native bridge for that panel, and deploys the updated Flow in one operation. The bridge revision must match the saved mapping before a command can reach a device. A Node-RED simulation verifies software behavior, while live device operation requires a separate check.
+After clicking Apply in the page binding editor, the package validates the mapping, backs up the active Flow, and generates the native bridge for that panel using the original 1.8.9 flow. Apply does not click Deploy for the user. When Automator reports the external Flow change, the editor refreshes its Flow view once; review the refreshed Flow and deploy it yourself. The bridge revision must match the saved mapping before a command can reach a device. A Node-RED simulation verifies software behavior, while live device operation requires a separate check.
 
 The current runtime has one panel-scoped control path. The retired topic-based region gateway, fixed demo scenes, hand-written control tags, and `sendControl` authoring API are not supported. The page editor and server use the same target compatibility rules.
 

package/control-catalog.js

@@ -1,4 +1,5 @@
 const { schemaVersion } = require('./control-type-contract.json')
+const { runtimeJsonRequest } = require('./panel-http')
 
 function catalogBase (settings) {
   const port = Number(settings?.uiPort)
@@ -15,15 +16,16 @@ function catalogBase (settings) {
 }
 
 async function catalogRequest (base, path, device, fetcher = fetch) {
-  const options = { signal: AbortSignal.timeout(5000) }
+  const options = {}
   if (device !== undefined) {
     options.method = 'POST'
     options.headers = { 'content-type': 'application/json' }
     options.body = JSON.stringify([device])
   }
-  const response = await fetcher(new URL(path, base), options)
+  const { response, data } = await runtimeJsonRequest(new URL(path, base), options, {
+    fetcher, timeoutMs: 15000, operation: `Device catalog ${path}${device ? ' (' + device + ')' : ''}`
+  })
   if (!response.ok) throw new Error(`Automator catalog HTTP ${response.status}`)
-  const data = await response.json()
   if (data.code !== 0 || !Array.isArray(data.value)) throw new Error(data.reason || 'Invalid Automator catalog response')
   return data.value
 }

package/control-panel.html

@@ -229,9 +229,11 @@
                 })
 
                 $('#control-binding-auth').show()
-                $('#control-visual-open').on('click', function () {
+                const openDashboardPage = (editMode) => {
+                    const scope = $templateScope.val() || that.templateScope || 'local'
                     const group = RED.nodes.node($('#node-input-group').val() || that.group)
-                    const page = RED.nodes.node($('#node-input-page').val() || that.page || group?.page)
+                    const pageId = scope === 'local' ? group?.page : ($('#node-input-page').val() || that.page)
+                    const page = RED.nodes.node(pageId)
                     const base = RED.nodes.node(page?.ui)
                     if (!page?.path) {
                         RED.notify('Choose a Dashboard page, then save and deploy this node.', { type: 'warning' })
@@ -239,9 +241,11 @@
                     }
                     const url = new URL((base?.path || '/dashboard').replace(/\/$/, '') + '/' +
                         page.path.replace(/^\//, ''), window.location.origin)
-                    url.searchParams.set('cp-edit', that.id)
+                    if (editMode) url.searchParams.set('cp-edit', that.id)
                     window.open(url.href, '_blank', 'noopener')
-                })
+                }
+                $('#control-page-open').on('click', () => openDashboardPage(false))
+                $('#control-visual-open').on('click', () => openDashboardPage(true))
                 RED.library.create({
                     url: 'uitemplates', // where to get the data from
                     type: 'ui-template', // the type of object the library is for
@@ -334,6 +338,11 @@
             }
             this.editor && this.editor.resize()
         }
+        if (RED.comms?.subscribe) {
+            $.ajax({ url: 'ui-control-panel/editor-sync.js', dataType: 'script', cache: false })
+                .done(() => window.ControlPanelFlowEditorSync.install(RED, $, window))
+                .fail(() => RED.notify('ControlPanel automatic Flow sync could not be loaded.', 'warning'))
+        }
     })()
 </script>
 
@@ -350,7 +359,7 @@
     <p>普通 HTML/Vue 控件由页面绑定编辑器自动识别，并通过面板的 authenticated session 发送控制。开发者不需要添加标签、调用自定义节点 API，或在 Template 中实现 throttling、latest-wins、队列和设备协议。</p>
     <p>页面只需按普通 H5/Vue 方式编写控件；编辑模式下在控件上打开绑定菜单，选择设备参数即可。登录、发送、反馈和状态同步由节点负责，Template 不应主动查询设备或把反馈回发成命令。</p>
     <p>See <code>CONTROL_PANEL_AI_GUIDE.md</code> in the node package for the complete AI authoring contract and examples.</p>
-    <p>Save and Deploy the panel, then use Open page binding editor. Apply in that page validates and saves bindings, backs up the Flow, regenerates the native bridge, and deploys it. Ordinary Deploy alone does not apply bindings. Check targets and numbering before using real hardware.</p>
+    <p>Save and Deploy the panel, then use Open binding editor. Apply in that page validates and saves bindings, backs up the Flow, and regenerates the native bridge. When Node-RED reports a newer external Flow revision, the Automator editor page reloads once; the panel never imports or deploys Flow data. Ordinary Deploy alone does not apply bindings. Check targets and numbering before using real hardware.</p>
 </script>
 
 <script type="text/html" data-template-name="ui-control-panel">
@@ -428,10 +437,10 @@
         <div style="height:250px; min-height:100px" class="node-text-editor" id="node-input-format-editor" ></div>
     </div>
     <div class="form-row">
-        <label>Page binding</label>
+        <label>Page</label>
         <input type="hidden" id="node-input-visualBindings">
-        <button type="button" id="control-visual-open" class="red-ui-button">Open page binding editor</button>
-        <span class="control-binding-hint">Use ordinary HTML/Vue controls. Binding is configured from the page.</span>
+        <button type="button" id="control-page-open" class="red-ui-button">Open page</button>
+        <button type="button" id="control-visual-open" class="red-ui-button">Open binding editor</button>
     </div>
     <div class="form-row" style="display:none">
         <input type="hidden" id="node-input-bridgeRevisionApplied">

package/control-panel.js

@@ -69,6 +69,10 @@ module.exports = function (RED) {
   const base = catalogBase(RED.settings)
   const activePanels = new Map()
   const activeEditors = new Map()
+  RED.httpAdmin.get('/ui-control-panel/editor-sync.js', RED.auth.needsPermission('nodes.read'), (_req, res) => {
+    res.setHeader('Cache-Control', 'no-store')
+    res.sendFile(path.join(__dirname, 'panel-flow-editor-sync.js'))
+  })
   RED.httpNode.use((req, res, next) => {
     const path = new URL(req.url, 'http://localhost').pathname
     if (path === '/control-panel-assets/panel-login-bg.png') {
@@ -194,16 +198,16 @@ module.exports = function (RED) {
           if (!base) throw new Error('Device catalog unavailable')
           return listCatalogTargets(base, device)
         },
-        apply: async (req, body) => applyVisualBindings({
-          panelId: node.id,
-          rev: body.rev,
-          templateHash: body.templateHash,
-          entries: body.entries,
-          userDir: RED.settings.userDir,
-          localPort: req.socket.localPort,
-          adminRoot: RED.settings.httpAdminRoot ?? '/',
-          catalogBase: base
-        })
+        apply: (req, body) => applyVisualBindings({
+            panelId: node.id,
+            rev: body.rev,
+            templateHash: body.templateHash,
+            entries: body.entries,
+            userDir: RED.settings.userDir,
+            localPort: req.socket.localPort,
+            adminRoot: RED.settings.httpAdminRoot ?? '/',
+            catalogBase: base
+          })
       })
       if (editor) activeEditors.set(node.id, editor)
       else node.warn?.('Visual binding editor needs an editor username and password')

package/managed-bridge-revision.js

@@ -29,4 +29,4 @@ function managedBridgeRevision (panel) {
   return `v1:${crypto.createHash('sha256').update(JSON.stringify(payload)).digest('hex')}`
 }
 
-module.exports = { managedBridgeRevision }
+module.exports = { managedBridgeRevision, canonical }

package/npm-shrinkwrap.json

@@ -1,12 +1,12 @@
 {
   "name": "node-red-contrib-room-tools",
-  "version": "1.8.8",
+  "version": "1.8.15",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "node-red-contrib-room-tools",
-      "version": "1.8.8",
+      "version": "1.8.15",
       "license": "UNLICENSED",
       "dependencies": {
         "@vue/compiler-sfc": "3.5.42",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "node-red-contrib-room-tools",
-  "version": "1.8.8",
+  "version": "1.8.15",
   "description": "Authenticated visual control panel binding for Node-RED and MUSE Automator",
   "license": "UNLICENSED",
   "engines": { "node": ">=18.16.0" },
@@ -26,6 +26,7 @@
     "panel-visual-apply.js",
     "panel-editor-auth.js",
     "panel-http.js",
+    "panel-flow-editor-sync.js",
     "panel-binding-editor.js",
     "native-binding-plan.js",
     "managed-native-bridge.js",

package/panel-flow-editor-sync.js

@@ -0,0 +1,53 @@
+(function (root, factory) {
+  if (typeof window === 'object') root.ControlPanelFlowEditorSync = factory()
+  else if (typeof module === 'object' && module.exports) module.exports = factory()
+})(typeof window === 'object' ? window : this, function () {
+  const topic = 'notification/runtime-deploy'
+
+  // Node-RED already owns the Flow-changed notification. This listener only
+  // reloads the editor page after a newer runtime revision is announced. It
+  // must never read, clear, import, or deploy Flow data.
+  function createController (hooks) {
+    let stopped = false
+    let reloading = false
+
+    function request (message) {
+      if (stopped || reloading || !message || typeof message.revision !== 'string') return
+      const current = hooks.version()
+      // A retained notification received during page startup describes the
+      // Flow that is already loaded. Ignore it instead of causing a reload.
+      if (typeof current !== 'string' || current === message.revision) return
+      reloading = true
+      hooks.reload()
+    }
+
+    return { request, stop: () => { stopped = true } }
+  }
+
+  function install (RED, $, host = window) {
+    if (RED.__controlPanelFlowSync) return RED.__controlPanelFlowSync
+    if (!RED.comms?.subscribe || !RED.nodes?.version || !host.location?.reload) {
+      RED.notify('ControlPanel Flow change listener is unavailable in this editor.', 'warning')
+      return
+    }
+
+    const controller = createController({
+      version: () => RED.nodes.version(),
+      reload: () => host.location.reload()
+    })
+    const changed = (_topic, message) => controller.request(message)
+    RED.comms.subscribe(topic, changed)
+    const instance = {
+      request: controller.request,
+      dispose () {
+        controller.stop()
+        RED.comms.unsubscribe(topic, changed)
+        delete RED.__controlPanelFlowSync
+      }
+    }
+    RED.__controlPanelFlowSync = instance
+    return instance
+  }
+
+  return { topic, createController, install }
+})

package/panel-http.js

@@ -58,12 +58,34 @@ async function readJsonBody (req, maxBytes) {
 // Serialized into the Vue component, so keep this function browser-only and self-contained.
 async function fetchWithTimeout (url, options = {}, timeoutMs = 12000) {
   const controller = new AbortController()
-  const timer = setTimeout(() => controller.abort(), timeoutMs)
+  let timedOut = false
+  const timer = setTimeout(() => { timedOut = true; controller.abort() }, timeoutMs)
   try {
     return await fetch(url, { ...options, signal: controller.signal })
+  } catch (error) {
+    if (timedOut) throw new Error('Request timed out; your binding draft is still available')
+    throw error
   } finally {
     clearTimeout(timer)
   }
 }
 
-module.exports = { sameOrigin, replyJson, readJsonBody, fetchWithTimeout }
+// Keep the deadline active through JSON decoding, not just response headers.
+async function runtimeJsonRequest (url, options, { fetcher = fetch, timeoutMs, operation }) {
+  const controller = new AbortController()
+  let timedOut = false
+  const timer = setTimeout(() => { timedOut = true; controller.abort() }, timeoutMs)
+  try {
+    const response = await fetcher(url, { ...options, signal: controller.signal })
+    if (!response.ok) return { response, data: null }
+    return { response, data: await response.json() }
+  } catch (cause) {
+    const error = new Error(`${operation} ${timedOut ? 'timed out' : 'failed'}; ${timedOut ? 'the runtime did not respond in time' : cause.message}`, { cause })
+    error.status = 503
+    throw error
+  } finally {
+    clearTimeout(timer)
+  }
+}
+
+module.exports = { sameOrigin, replyJson, readJsonBody, fetchWithTimeout, runtimeJsonRequest }