dmx-api 4.0.0 → 4.0.2

package/README.md

@@ -2,9 +2,21 @@
 
 ## Version History
 
+**4.0.2** -- Jan 31, 2026
+
+* Fix:
+    - Log proper dmx-api version in browser console
+
+**4.0.1** -- Jan 31, 2026
+
+* Improvement:
+    - No alert box appears when WebSocket connection is dropped. Reopens when browser is "foregrounded".
+* Fix:
+    - Topic positioning for `Topicmap` instances hold as reactive Vue 3 state.
+
 **4.0** -- Oct 16, 2024
 
-* BREAKING CHANGES
+* BREAKING CHANGE
     - requires Vue 3 (instead Vue 2)
 
 **3.1** -- Oct 16, 2024
@@ -331,4 +343,4 @@ library's `init()` function.
 
 ------------
 Jörg Richter  
-Oct 16, 2024
+Jan 31, 2026

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dmx-api",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "description": "API and utilities for DMX 5 based frontends",
   "author": "Jörg Richter <jri@dmx.berlin>",
   "license": "AGPL-3.0",

package/src/index.js

@@ -6,7 +6,7 @@ import icons        from './icons'
 import DMXWebSocket from './websocket'
 import {default as typeCache, init as initTypeCache, storeModule} from './type-cache'
 
-console.log('[DMX-API] 4.0')
+console.log('[DMX-API] 4.0.2')
 
 let adminWorkspaceId    // promise
 

package/src/model.js

@@ -901,7 +901,11 @@ class Topicmap extends Topic {
       viewTopic.children = topic.children   // ### TODO, see comment in newViewTopic() above
       this.addTopic(viewTopic)
       op.type = 'add'
-      op.viewTopic = viewTopic
+      op.viewTopic = this.getTopic(topic.id)
+      // Note: we don't assign plain "viewTopic" to op.viewTopic but must re-access it by this.getTopic(). In case of a
+      // Vue 3 application both are not the same as addTopic() implicitly wraps viewTopic into a JS Proxy object
+      // (provided this Topicmap instance is reactive state). All subsequent modifications of viewTopic (in particular
+      // the initialization of its position) must be applied to the Proxy object then, not the original viewTopic.
     } else {
       if (!viewTopic.isVisible()) {
         viewTopic.setVisibility(true)

package/src/rpc.js

@@ -536,7 +536,7 @@ export default {
   },
 
   /**
-   * @param   password   expected to be SHA256 encoded
+   * @param   password   plain text
    *
    * @return  a promise for a Username topic
    */

package/src/websocket.js

@@ -1,4 +1,4 @@
-const IDLE_INTERVAL = 60 * 1000     // 60s
+const HEARTBEAT_INTERVAL = 25 * 1000     // 25s
 
 /**
  * A WebSocket connection to the DMX server.
@@ -13,6 +13,8 @@ const IDLE_INTERVAL = 60 * 1000     // 60s
 export default class DMXWebSocket {
 
   /**
+   * @param   config
+   *              a promise for an object having a `dmx.websockets.url` property.
    * @param   messageHandler
    *              the function that processes incoming messages.
    *              One argument is passed: the message pushed by the server (a deserialzed JSON object).
@@ -20,8 +22,8 @@ export default class DMXWebSocket {
   constructor (config, messageHandler) {
     this.messageHandler = messageHandler
     config.then(config => {
+      document.addEventListener('visibilitychange', this._handleVisibilityChange.bind(this))
       this.url = config['dmx.websockets.url']
-      // DEV && console.log('[DMX] CONFIG: WebSocket server is reachable at', this.url)
       this._connect()
     })
   }
@@ -35,11 +37,21 @@ export default class DMXWebSocket {
     this.ws.send(JSON.stringify(message))
   }
 
+  _handleVisibilityChange () {
+    DEV && console.log('[DMX] Document visibility:', document.visibilityState, new Date())
+    if (document.visibilityState === "hidden") {
+      // mobile browsers often kill background sockets anyway
+      this._close()
+    } else {
+      this._connect()
+    }
+  }
+
   _connect () {
-    DEV && console.log('[DMX] Opening WebSocket connection to', this.url)
+    DEV && console.log('[DMX] Connecting', this.url)
     this.ws = new WebSocket(this.url)
     this.ws.onopen = e => {
-      this._startIdling()
+      this._startHeartbeat()
     }
     this.ws.onmessage = e => {
       const message = JSON.parse(e.data)
@@ -47,33 +59,32 @@ export default class DMXWebSocket {
       this.messageHandler(message)
     }
     this.ws.onclose = e => {
-      DEV && console.log('[DMX] WebSocket connection closed (' + e.reason + ')')
-      this._stopIdling()
-      this._reload()      // a closed ws connection is regarded an (backend/network) error which requires page reloading
+      DEV && console.log('[DMX] WebSocket closed', e.reason)
+      this._cleanup()
     }
     this.ws.onerror = e => {
       DEV && console.warn('[DMX] WebSocket error')
     }
   }
 
-  _startIdling () {
-    this.idleId = setInterval(this._idle.bind(this), IDLE_INTERVAL)
+  _startHeartbeat () {
+    this.heartbeatTimer = setInterval(this._ping.bind(this), HEARTBEAT_INTERVAL)
+  }
+
+  _stopHeartbeat () {
+    clearInterval(this.heartbeatTimer)
   }
 
-  _stopIdling () {
-    clearInterval(this.idleId)
+  _ping () {
+    DEV && console.log('[DMX] WebSocket ping')
+    this.send({type: 'ping'})
   }
 
-  _idle () {
-    DEV && console.log('[DMX] WebSocket connection idle')
-    this.send({type: 'idle'})
+  _close () {
+    this.ws.close()
   }
 
-  _reload () {
-    setTimeout(() => {
-      alert('There is a problem with the server or network.\n\nPlease press OK to reload page.\n' +
-        'If it fails try manual page reload.')
-      location.reload()
-    }, 1000)    // timeout to not interfere with interactive page reload (which also closes websocket connection)
+  _cleanup () {
+    this._stopHeartbeat()
   }
 }