@momo2555/koppeliajs 0.0.160 → 0.0.162

package/dist/components/ResizableText.svelte

@@ -1,26 +1,44 @@
 <script lang="ts">
-    import { routeType } from '../stores/routeStore.js';
+	import { routeType } from '../stores/routeStore.js';
 	import { Koppelia } from '../scripts/koppelia.js';
+	import { onDestroy } from 'svelte';
 
 	export let id: string = '';
-    export let defaultFontSize: number = 10;
+	export let defaultFontSize: number = 10;
 
 	$: fontSize = defaultFontSize;
+	$: callbackId = "";
 
 	let koppelia = Koppelia.instance;
-	
+
 	koppelia.onReady(async () => {
-		await koppelia.registerNewResizableText(id, defaultFontSize, (newFontSize: number) => {
+		let resizableTexts = await koppelia.getResizableTexts();
+		let resizableExist = false;
+		for (let rt of resizableTexts) {
+			if (rt.id !== undefined && rt.id == id) {
+				if (rt.fontSize !== undefined) {
+					fontSize = rt.fontSize;
+				}
+				resizableExist = true;
+				break;
+			}
+		}
+		if (!resizableExist) {
+			await koppelia.registerNewResizableText(id, defaultFontSize);
+		}
+		callbackId = koppelia.onResizableTextChanged(id, (newFontSize: number) => {
 			fontSize = newFontSize;
 		});
 	});
 
+	onDestroy(() => {
+		koppelia.unsubResizableText(callbackId);
+	});
 </script>
 
 <div class="resizable-text" id="resizable-text-{id}" style="font-size: {fontSize}px;">
-    <slot />
+	<slot />
 </div>
 
 <style>
-
 </style>

package/dist/scripts/console.d.ts

@@ -1,6 +1,6 @@
-import { KoppeliaWebsocket, type Callback } from './koppeliaWebsocket.js';
-import { Message, type MessageData, PeerType } from './message.js';
-import type { AnyState } from './state.js';
+import { type Callback, KoppeliaWebsocket } from "./koppeliaWebsocket.js";
+import { Message, type MessageData, PeerType } from "./message.js";
+import type { AnyState } from "./state.js";
 export type ChangeStateCallback = (from: string, state: AnyState, update: boolean) => void;
 export type ChangeStageCallback = (from: string, stage: string) => void;
 export type DataExchangeCallback = (from: string, data: any) => void;
@@ -11,7 +11,7 @@ export type AnyRequestCallback = (request: string, params: {
 }, from: string, address: string) => void;
 export type MediaResponseData = string | Blob | ArrayBuffer | any;
 /**
- * This class define the koppelia console, send and receive requests
+ * This class defines the Koppelia console to send and receive requests.
  */
 export declare class Console {
     consoleHostname: string;
@@ -22,58 +22,86 @@ export declare class Console {
     private _deviceDataHandlers;
     private _dataExchangeHandlers;
     private _anyRequestHandlers;
-    private _ready;
     private _onReadyCallback;
+    private _ready;
     private _mediaApiUrl;
     constructor();
     /**
-     * Sdnd a message to the console, set header.to to dispatch the message
-     * @param message
-     * @param callback the callback is called when websocket receives a response
+     * Generates a unique random ID for callback registration.
+     */
+    private _generateId;
+    /**
+     * Unsubscribes a previously registered callback using its ID.
+     * @param id The identifier returned by the "on..." functions.
+     * @returns true if the ID was found and deleted, false otherwise.
+     */
+    unsubscribeCallback(id: string): boolean;
+    /**
+     * Sends a message to the console. Set header.to to dispatch the message.
+     * @param message The message to send.
+     * @param callback The callback triggered when the websocket receives a response.
      */
     sendMessage(message: Message, callback?: Callback): void;
     /**
-     * Identify the page (controller or monitor) to the console
-     * @param peer
+     * Identifies the page (controller or monitor) to the console.
+     * @param peer The peer type to identify as.
      */
     identify(peer: PeerType): void;
     getConnectedDevices(): void;
     /**
-     * Send data to a peer
-     * @param receiver
-     * @param data
+     * Sends data to a specific peer.
+     * @param receiver The peer type receiving the data.
+     * @param data The data payload.
      */
     sendDataTo(receiver: PeerType, data: MessageData): void;
     /**
-     * Add a callback that will be executed when receive a new state from console
-     * @param callback
+     * Adds a callback to be executed when a new state is received from the console.
+     * @param callback Function to execute on state change.
+     * @returns The subscription ID.
+     */
+    onStateChange(callback: ChangeStateCallback): string;
+    /**
+     * Adds a callback to be executed when the current stage changes.
+     * @param callback Function to execute on stage change.
+     * @returns The subscription ID.
+     */
+    onStageChange(callback: ChangeStageCallback): string;
+    /**
+     * Adds a callback to be executed when the console is ready.
+     * If the console is already ready, the function is called immediately.
+     * @param callback Function to execute.
+     * @returns The subscription ID.
      */
-    onStateChange(callback: ChangeStateCallback): void;
+    onReady(callback: () => void): string;
     /**
-     * Add a callback that will be executed when the current stage has changed
-     * @param callback
+     * Adds a callback to listen for device events.
+     * @param callback Function to execute on device event.
+     * @returns The subscription ID.
      */
-    onStageChange(callback: ChangeStageCallback): void;
+    onDeviceEvent(callback: DeviceEventCallback): string;
     /**
-     * Add a callback that be called when console is ready, if thec onsole is already ready
-     * Calls directly the function
-     * @param callback
+     * Adds a callback to listen for data exchanges.
+     * @param callback Function to execute on data exchange.
+     * @returns The subscription ID.
      */
-    onReady(callback: () => void): void;
-    onDeviceEvent(callback: DeviceEventCallback): void;
-    onDataExchange(callback: DataExchangeCallback): void;
-    onRequest(callback: AnyRequestCallback): void;
+    onDataExchange(callback: DataExchangeCallback): string;
     /**
-     * Get if the connection with the console is ready
+     * Adds a callback to listen for generic requests.
+     * @param callback Function to execute on request.
+     * @returns The subscription ID.
+     */
+    onRequest(callback: AnyRequestCallback): string;
+    /**
+     * Gets the current readiness state of the console connection.
      */
     get ready(): boolean;
     getMediaUrl(path: string): string;
     /**
-     * Call thus function to fix the link and make it work for both controller and monitor
-     * Sometimes, the link is get from monitor or controller and save as a game state. But
-     * When the oher client will get the link will not work. Using this function for all media
-     * Url is a good practice.
-     * @param mediaUrl
+     * Normalizes the media URL to ensure it works for both the controller and the monitor.
+     * Sometimes, a link retrieved from one client is saved as a game state, but fails
+     * when accessed by the other client. Wrapping all media URLs with this function is best practice.
+     * @param mediaUrl The original media URL.
+     * @returns The corrected URL string.
      */
     fixMediaUrl(mediaUrl: string): string;
     getMedia(path: string): Promise<MediaResponseData>;
@@ -85,5 +113,8 @@ export declare class Console {
     private _execChangeStageHandlers;
     private _execDataExchangeHandlers;
     private _execAnyRequestHandlers;
+    /**
+     * Clears all registered event handlers.
+     */
     destroyEvents(): void;
 }

package/dist/scripts/console.js

@@ -1,25 +1,26 @@
-import { KoppeliaWebsocket } from './koppeliaWebsocket.js';
-import { Message, PeerType, MessageType } from './message.js';
-import { page } from '$app/stores';
-import { get } from 'svelte/store';
-import { routeType } from '../stores/routeStore.js';
-import { logger } from './logger.js';
+import { KoppeliaWebsocket } from "./koppeliaWebsocket.js";
+import { Message, MessageType, PeerType } from "./message.js";
+import { page } from "$app/stores";
+import { get } from "svelte/store";
+import { routeType } from "../stores/routeStore.js";
+import { logger } from "./logger.js";
 const PORT = 2225;
 const API_PORT = 8000;
 /**
- * This class define the koppelia console, send and receive requests
+ * This class defines the Koppelia console to send and receive requests.
  */
 export class Console {
     consoleHostname = "";
     consoleSocket;
+    // Event handlers stored as dictionaries (Record) for ID-based subscription management
     _changeStateHandlers;
     _changeStageHandlers;
     _deviceEventHandlers;
     _deviceDataHandlers;
     _dataExchangeHandlers;
     _anyRequestHandlers;
-    _ready = false;
     _onReadyCallback;
+    _ready = false;
     _mediaApiUrl;
     constructor() {
         this.consoleHostname = "";
@@ -30,32 +31,79 @@ export class Console {
         this.consoleSocket = new KoppeliaWebsocket(consoleUrl);
         this._mediaApiUrl = "http://" + this.consoleHostname + ":" + API_PORT;
         this._ready = false;
-        this._changeStateHandlers = [];
-        this._changeStageHandlers = [];
-        this._deviceEventHandlers = [];
-        this._deviceDataHandlers = [];
-        this._dataExchangeHandlers = [];
-        this._onReadyCallback = [];
-        this._anyRequestHandlers = [];
+        // Initialize dictionaries
+        this._changeStateHandlers = {};
+        this._changeStageHandlers = {};
+        this._deviceEventHandlers = {};
+        this._deviceDataHandlers = {};
+        this._dataExchangeHandlers = {};
+        this._onReadyCallback = {};
+        this._anyRequestHandlers = {};
         this._initEvents();
     }
     /**
-     * Sdnd a message to the console, set header.to to dispatch the message
-     * @param message
-     * @param callback the callback is called when websocket receives a response
+     * Generates a unique random ID for callback registration.
+     */
+    _generateId() {
+        return Math.random().toString(36).substring(2, 15) +
+            Math.random().toString(36).substring(2, 15);
+    }
+    /**
+     * Unsubscribes a previously registered callback using its ID.
+     * @param id The identifier returned by the "on..." functions.
+     * @returns true if the ID was found and deleted, false otherwise.
+     */
+    unsubscribeCallback(id) {
+        let deleted = false;
+        if (id in this._changeStateHandlers) {
+            delete this._changeStateHandlers[id];
+            deleted = true;
+        }
+        if (id in this._changeStageHandlers) {
+            delete this._changeStageHandlers[id];
+            deleted = true;
+        }
+        if (id in this._deviceEventHandlers) {
+            delete this._deviceEventHandlers[id];
+            deleted = true;
+        }
+        if (id in this._deviceDataHandlers) {
+            delete this._deviceDataHandlers[id];
+            deleted = true;
+        }
+        if (id in this._dataExchangeHandlers) {
+            delete this._dataExchangeHandlers[id];
+            deleted = true;
+        }
+        if (id in this._anyRequestHandlers) {
+            delete this._anyRequestHandlers[id];
+            deleted = true;
+        }
+        if (id in this._onReadyCallback) {
+            delete this._onReadyCallback[id];
+            deleted = true;
+        }
+        return deleted;
+    }
+    /**
+     * Sends a message to the console. Set header.to to dispatch the message.
+     * @param message The message to send.
+     * @param callback The callback triggered when the websocket receives a response.
      */
     sendMessage(message, callback) {
         let route = PeerType.NONE;
-        if (get(routeType) == "monitor")
+        if (get(routeType) == "monitor") {
             route = PeerType.MONITOR;
-        else if (get(routeType) == "controller")
+        }
+        else if (get(routeType) == "controller") {
             route = PeerType.CONTROLLER;
+        }
         message.setSource(route, "");
         this.consoleSocket.send(message, callback);
     }
     /**
-     * Identify the page (controller or monitor) to the console
-     * @param peer
+     * Identifies the page (controller or monitor) to the console.
+     * @param peer The peer type to identify as.
      */
     identify(peer) {
         let req = new Message();
@@ -65,9 +113,9 @@ export class Console {
     getConnectedDevices() {
     }
     /**
-     * Send data to a peer
-     * @param receiver
-     * @param data
+     * Sends data to a specific peer.
+     * @param receiver The peer type receiving the data.
+     * @param data The data payload.
      */
     sendDataTo(receiver, data) {
         let req = new Message();
@@ -75,41 +123,73 @@ export class Console {
         req.setDestination(receiver);
     }
     /**
-     * Add a callback that will be executed when receive a new state from console
-     * @param callback
+     * Adds a callback to be executed when a new state is received from the console.
+     * @param callback Function to execute on state change.
+     * @returns The subscription ID.
      */
     onStateChange(callback) {
-        this._changeStateHandlers.push(callback);
+        const id = this._generateId();
+        this._changeStateHandlers[id] = callback;
+        return id;
     }
     /**
-     * Add a callback that will be executed when the current stage has changed
-     * @param callback
+     * Adds a callback to be executed when the current stage changes.
+     * @param callback Function to execute on stage change.
+     * @returns The subscription ID.
      */
     onStageChange(callback) {
-        this._changeStageHandlers.push(callback);
+        const id = this._generateId();
+        this._changeStageHandlers[id] = callback;
+        return id;
     }
     /**
-     * Add a callback that be called when console is ready, if thec onsole is already ready
-     * Calls directly the function
-     * @param callback
+     * Adds a callback to be executed when the console is ready.
+     * If the console is already ready, the function is called immediately.
+     * @param callback Function to execute.
+     * @returns The subscription ID.
      */
     onReady(callback) {
-        if (!this._ready)
-            this._onReadyCallback.push(callback);
-        else
+        const id = this._generateId();
+        if (!this._ready) {
+            this._onReadyCallback[id] = callback;
+        }
+        else {
             callback();
+        }
+        return id;
     }
+    /**
+     * Adds a callback to listen for device events.
+     * @param callback Function to execute on device event.
+     * @returns The subscription ID.
+     */
     onDeviceEvent(callback) {
-        this._deviceEventHandlers.push(callback);
+        const id = this._generateId();
+        this._deviceEventHandlers[id] = callback;
+        return id;
     }
+    /**
+     * Adds a callback to listen for data exchanges.
+     * @param callback Function to execute on data exchange.
+     * @returns The subscription ID.
+     */
     onDataExchange(callback) {
-        this._dataExchangeHandlers.push(callback);
+        const id = this._generateId();
+        this._dataExchangeHandlers[id] = callback;
+        return id;
     }
+    /**
+     * Adds a callback to listen for generic requests.
+     * @param callback Function to execute on request.
+     * @returns The subscription ID.
+     */
     onRequest(callback) {
-        this._anyRequestHandlers.push(callback);
+        const id = this._generateId();
+        this._anyRequestHandlers[id] = callback;
+        return id;
     }
     /**
-     * Get if the connection with the console is ready
+     * Gets the current readiness state of the console connection.
      */
     get ready() {
         return this._ready;
@@ -120,11 +200,11 @@ export class Console {
         return this._mediaApiUrl + path;
     }
     /**
-     * Call thus function to fix the link and make it work for both controller and monitor
-     * Sometimes, the link is get from monitor or controller and save as a game state. But
-     * When the oher client will get the link will not work. Using this function for all media
-     * Url is a good practice.
-     * @param mediaUrl
+     * Normalizes the media URL to ensure it works for both the controller and the monitor.
+     * Sometimes, a link retrieved from one client is saved as a game state, but fails
+     * when accessed by the other client. Wrapping all media URLs with this function is best practice.
+     * @param mediaUrl The original media URL.
+     * @returns The corrected URL string.
      */
     fixMediaUrl(mediaUrl) {
         let url = new URL(mediaUrl);
@@ -140,22 +220,23 @@ export class Console {
         }
         const contentType = response.headers.get("Content-Type") || "";
         if (contentType.includes("application/json")) {
-            return await response.json(); // Object
+            return await response.json(); // Returns an Object
         }
         else if (contentType.startsWith("text/")) {
-            return await response.text(); // String
+            return await response.text(); // Returns a String
         }
-        else if (contentType.startsWith("image/") || contentType.includes("application/octet-stream")) {
-            return await response.blob(); // Blob (images, downloads, etc.)
+        else if (contentType.startsWith("image/") ||
+            contentType.includes("application/octet-stream")) {
+            return await response.blob(); // Returns a Blob (images, downloads, etc.)
         }
         else {
-            return await response.arrayBuffer(); // Generic binary
+            return await response.arrayBuffer(); // Returns a Generic binary buffer
         }
     }
     _initEvents() {
         this.consoleSocket.onOpen(() => {
             this._ready = true;
-            for (let callback of this._onReadyCallback) {
+            for (let callback of Object.values(this._onReadyCallback)) {
                 callback();
             }
         });
@@ -164,9 +245,10 @@ export class Console {
         });
     }
     _processReceivedData(request) {
-        logger.log("Receive new data from console", request);
-        if (request.header.type === undefined)
+        logger.log("Received new data from console", request);
+        if (request.header.type === undefined) {
             return;
+        }
         let type = request.header.type;
         /* Handle specific requests */
         if (type == MessageType.REQUEST) {
@@ -182,54 +264,56 @@ export class Console {
                     this._execAnyRequestHandlers(request.request.exec, request.request.params, request.header.from, request.header.from_addr);
                     break;
             }
-        }
-        /* Handle data exchange */
+        } /* Handle data exchange */
         else if (type == MessageType.DATA_EXCHANGE) {
             this._execDataExchangeHandlers(request.header.from, request.data);
-        }
-        /* Handle device event */
+        } /* Handle device event */
         else if (type == MessageType.DEVICE_EVENT) {
             this._execDeviceEventHandlers(request.header.device, request.header.from_addr, request.event);
-        }
-        /* Handle device data */
+        } /* Handle device data */
         else if (type == MessageType.DEVICE_DATA) {
             this._execDeviceDataHandlers(request.header.from_addr, request.data);
         }
     }
+    // Handler execution methods iterating over dictionary values
     _execDeviceDataHandlers(from_addr, data) {
-        for (let handler of this._deviceDataHandlers) {
+        for (let handler of Object.values(this._deviceDataHandlers)) {
             handler(from_addr, data);
         }
     }
     _execDeviceEventHandlers(device, from_addr, event) {
-        for (let handler of this._deviceEventHandlers) {
+        for (let handler of Object.values(this._deviceEventHandlers)) {
             handler(device, from_addr, event);
         }
     }
     _execChangeStateHandlers(from, state, update) {
-        for (let handler of this._changeStateHandlers) {
+        for (let handler of Object.values(this._changeStateHandlers)) {
             handler(from, state, update);
         }
     }
     _execChangeStageHandlers(from, stage) {
-        for (let handler of this._changeStageHandlers) {
+        for (let handler of Object.values(this._changeStageHandlers)) {
             handler(from, stage);
         }
     }
     _execDataExchangeHandlers(from, data) {
-        for (let handler of this._dataExchangeHandlers) {
+        for (let handler of Object.values(this._dataExchangeHandlers)) {
             handler(from, data);
         }
     }
     _execAnyRequestHandlers(request, params, from, address) {
-        for (let handler of this._anyRequestHandlers) {
+        for (let handler of Object.values(this._anyRequestHandlers)) {
             handler(request, params, from, address);
         }
     }
+    /**
+     * Clears all registered event handlers.
+     */
     destroyEvents() {
-        this._deviceEventHandlers = [];
-        this._deviceDataHandlers = [];
-        this._anyRequestHandlers = [];
-        logger.log("destroy events event handlers");
+        // Reset dictionaries to empty objects
+        this._deviceEventHandlers = {};
+        this._deviceDataHandlers = {};
+        this._anyRequestHandlers = {};
+        logger.log("Destroyed event handlers");
     }
 }

package/dist/scripts/koppelia.d.ts

@@ -89,7 +89,12 @@ export declare class Koppelia {
      * Add a new resizable text element and define the callback that will be executed when receive and a resizable
      * text update notification form koppelia application
      */
-    registerNewResizableText(id: string, defaultSize: number, onTextResized: (newSize: number) => void): Promise<void>;
+    registerNewResizableText(id: string, defaultSize: number): Promise<void>;
+    onResizableTextChanged(id: string, onTextResized: (newSize: number) => void): string;
+    unsubResizableText(callbackId: string): void;
+    getResizableTexts(): Promise<{
+        [key: string]: any;
+    }[]>;
     writeGameConfig(config_id: string, config_value: {
         [key: string]: any;
     }, current_play?: boolean): Promise<void>;

package/dist/scripts/koppelia.js

@@ -282,7 +282,7 @@ export class Koppelia {
      * Add a new resizable text element and define the callback that will be executed when receive and a resizable
      * text update notification form koppelia application
      */
-    async registerNewResizableText(id, defaultSize, onTextResized) {
+    async registerNewResizableText(id, defaultSize) {
         return new Promise((resolve, reject) => {
             if (get(routeType) == "monitor") {
                 let addGrowableElRequest = new Message();
@@ -294,18 +294,33 @@ export class Koppelia {
                 this._console.sendMessage(addGrowableElRequest, (response) => {
                 });
             }
-            this._console.onRequest((req, params) => {
-                if (req == "resizableTextNotification") {
-                    if (params.id !== undefined && params.id == id) {
-                        let fontSize = defaultSize;
-                        if (params.fontSize != undefined) {
-                            fontSize = params.fontSize;
-                        }
-                        onTextResized(fontSize);
-                    }
+            resolve();
+        });
+    }
+    onResizableTextChanged(id, onTextResized) {
+        return this._console.onRequest((req, params) => {
+            if (req == "resizableTextNotification") {
+                if (params.id !== undefined && params.id == id &&
+                    params.fontSize != undefined) {
+                    let fontSize = params.fontSize;
+                    onTextResized(fontSize);
                 }
+            }
+        });
+    }
+    unsubResizableText(callbackId) {
+        this._console.unsubscribeCallback(callbackId);
+    }
+    async getResizableTexts() {
+        return new Promise((resolve, reject) => {
+            let addGrowableElRequest = new Message();
+            addGrowableElRequest.setRequest("getResizableTexts");
+            addGrowableElRequest.setDestination(PeerType.MASTER, "");
+            // send the message to the console (only the controller sends the )
+            this._console.sendMessage(addGrowableElRequest, (response) => {
+                let resizables = response.getParam("resizableTexts", []);
+                resolve(resizables);
             });
-            resolve();
         });
     }
     async writeGameConfig(config_id, config_value, current_play = true) {

package/dist/scripts/play.js

@@ -26,6 +26,9 @@ export class Play {
         if (playRawObj.file_name !== undefined) {
             this._playFileName = playRawObj.file_name;
         }
+        if (playRawObj.thumbnail !== undefined) {
+            this._playImagebase64 = playRawObj.thumbnail;
+        }
         this._playContentLoaded = false;
     }
     getPlayMediaPath(mediaName) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@momo2555/koppeliajs",
-	"version": "0.0.160",
+	"version": "0.0.162",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",