swing-ui 1.0.1 → 1.0.4

package/README.md

@@ -77,7 +77,7 @@ class HelloApp extends Window {
     super("swing-ui Demo");
     this.innerSize(360, 160).position(200, 200).closeOperation(Window.CloseOperation.Exit);
 
-    new Label("What's your name?").position(20, 20).addTo(this);
+    new Label("What's your name?").position(20, 20).size(300, 25).addTo(this);
     const name = new TextField("type name here").size(300, 28).position(20, 45).addTo(this);
 
     new Button("Greet me").position(20, 85).addTo(this)

package/classes/ComponentContainer.js

@@ -111,8 +111,13 @@ export class ComponentContainer extends UIComponent
 
 		if(this.#descriptorObject == null)
 		{
-			this.applyComponentProperties = null;
-			this.applyUIDefinition = null;
+			this._applyUIDefinition = undefined;
+			this._applyComponentPropertiesV1_0 = undefined;
+			this._buildComponentResources = undefined;
+
+			delete this._applyUIDefinition;
+			delete this._applyComponentPropertiesV1_0;
+			delete this._buildComponentResources;
 		}
 	}
 
@@ -446,7 +451,7 @@ export class ComponentContainer extends UIComponent
 	 * @private
 	 * @ignore
 	 */
-	applyUIDefinition(class_name)
+	_applyUIDefinition(class_name)
 	{
 		// Apply UI to this component
 		if(this.#descriptorObject != null)
@@ -473,12 +478,12 @@ export class ComponentContainer extends UIComponent
 				try
 				{
 					common.validateComponent(this.#descriptorObject.component);
+					this._buildComponentResources(this, this.#descriptorObject, common); // contextMenus, menuBar, trayIcons
+					this._applyComponentPropertiesV1_0(this, this.#descriptorObject.component, common);
 				}catch(ex)
 				{
 					error(`${ex.name}: ${ex.message}`, false);
 				}
-
-				this.applyComponentPropertiesV1_0(this, this.#descriptorObject.component, common);
 			}
 			else
 			{
@@ -502,15 +507,108 @@ export class ComponentContainer extends UIComponent
 		}
 
 		// delete these functions to make sure they can't be called again
-		this.applyComponentProperties = null;
-		this.applyComponentPropertiesV1_0 = null;
-		this.applyUIDefinition = null;
+		this._buildComponentResources = undefined;
+		this._applyComponentPropertiesV1_0 = undefined;
+		this._applyUIDefinition = undefined;
+
+		delete this._buildComponentResources;
+		delete this._applyComponentPropertiesV1_0;
+		delete this._applyUIDefinition;
+	}
+
+	/**
+	 * @private
+	 */
+	_buildComponentResources(component, desc, common)
+	{
+		//region For backward compatibility
+		if("contextMenus" in desc.component)
+		{
+			desc.contextMenus = desc.component.contextMenus;
+			delete desc.component.contextMenus;
+		}
+
+		if("trayIcons" in desc.component)
+		{
+			desc.trayIcons = desc.component.trayIcons;
+			delete desc.component.trayIcons;
+		}
+		//endregion
+
+		// load context menus
+		if("contextMenus" in desc)
+		{
+			if(Array.isArray(desc.contextMenus))
+			{
+				desc.contextMenus.forEach(json_child =>
+				{
+					try
+					{
+						common.validateComponent(json_child);
+
+						this[json_child.ref] = new globalThis[json_child.type]();
+						this._applyComponentPropertiesV1_0(this[json_child.ref], json_child, common);
+					}catch(ex)
+					{
+						error(`Failed to load a context menu. ${ex.name}: ${ex.message}`, false);
+					}
+				});
+			}
+
+			delete desc.contextMenus;
+		}
+
+		if(desc.component.type === "Window")
+		{
+			// load main menu bar
+			if("menuBar" in desc.component)
+			{
+				try
+				{
+					common.validateComponent(desc.component.menuBar);
+
+					const bar = new globalThis[desc.component.menuBar.type]();
+					this._applyComponentPropertiesV1_0(bar, desc.component.menuBar, common);
+					component.menuBar(bar);
+					delete desc.component.menuBar;
+				}catch(ex)
+				{
+					error(`Failed to load a menu bar. ${ex.name}: ${ex.message}`, false);
+				}
+			}
+
+			// load tray icons
+			if("trayIcons" in desc)
+			{
+				if(Array.isArray(desc.trayIcons))
+				{
+					desc.trayIcons.forEach(json_child =>
+					{
+						try
+						{
+							common.validateComponent(json_child);
+						}catch(ex)
+						{
+							error(`Failed to load a tray icon. ${ex.name}: ${ex.message}`, false);
+							return;
+						}
+
+						const trayIcon = new globalThis[json_child.type]();
+						this.onDispose(e => {if(!trayIcon.destroyed) trayIcon.destroy();}); // destroy the tray icon when window gets disposed
+						this[json_child.ref] = trayIcon;
+						this._applyComponentPropertiesV1_0(trayIcon, json_child, common);
+					});
+				}
+
+				delete desc.trayIcons;
+			}
+		}
 	}
 
 	/**
 	 * @private
 	 */
-	applyComponentPropertiesV1_0(component, properties, common)
+	_applyComponentPropertiesV1_0(component, properties, common)
 	{
 		const ref = properties.ref;
 		delete properties.ref;
@@ -605,76 +703,6 @@ export class ComponentContainer extends UIComponent
 			}
 		}
 
-		// load context menus
-		if("contextMenus" in properties)
-		{
-			if(Array.isArray(properties.contextMenus))
-			{
-				properties.contextMenus.forEach(json_child =>
-				{
-					try
-					{
-						common.validateComponent(json_child);
-					}catch(ex)
-					{
-						error(`Failed to load a context menu. ${ex.name}: ${ex.message}`, false);
-						return;
-					}
-
-					this[json_child.ref] = new globalThis[json_child.type]();
-					this.applyComponentPropertiesV1_0(this[json_child.ref], json_child, common);
-				});
-			}
-
-			delete properties.contextMenus;
-		}
-
-		if(component instanceof Window)
-		{
-			// load main menu bar
-			if("menuBar" in properties)
-			{
-				try
-				{
-					common.validateComponent(properties.menuBar);
-				}catch(ex)
-				{
-					error(`Failed to load a menu bar. ${ex.name}: ${ex.message}`, false);
-				}
-
-				const bar = new globalThis[properties.menuBar.type]();
-				this.applyComponentPropertiesV1_0(bar, properties.menuBar, common);
-				component.menuBar(bar);
-				delete properties.menuBar;
-			}
-
-			// load tray icons
-			if("trayIcons" in properties)
-			{
-				if(Array.isArray(properties.trayIcons))
-				{
-					properties.trayIcons.forEach(json_child =>
-					{
-						try
-						{
-							common.validateComponent(json_child);
-						}catch(ex)
-						{
-							error(`Failed to load a tray icon. ${ex.name}: ${ex.message}`, false);
-							return;
-						}
-
-						const trayIcon = new globalThis[json_child.type]();
-						component.onDispose(e => {if(!trayIcon.destroyed) trayIcon.destroy();}); // destroy the tray icon when window gets disposed
-						this[json_child.ref] = trayIcon;
-						this.applyComponentPropertiesV1_0(trayIcon, json_child, common);
-					});
-				}
-
-				delete properties.trayIcons;
-			}
-		}
-
 		// apply properties
 		for(const prop of Object.keys(properties))
 		{
@@ -748,7 +776,7 @@ export class ComponentContainer extends UIComponent
 
 				const child_ref = json_child.ref;
 				this[child_ref] = new globalThis[json_child.type]();
-				this.applyComponentPropertiesV1_0(this[child_ref], json_child, common);
+				this._applyComponentPropertiesV1_0(this[child_ref], json_child, common);
 				component.addChild(this[child_ref]);
 			});
 		}
@@ -803,7 +831,7 @@ export class ComponentContainer extends UIComponent
 			{
 				try
 				{
-					component[event](new Function('e', func.substring(11).trim()).bind(this));
+					component[event](new Function('e', func.substring(11).trim()).bind(component));
 				}catch(ex)
 				{
 					component[event]((...args) =>

package/classes/Panel.js

@@ -32,7 +32,7 @@ class Panel extends ShapeContainer
 		//this.finalize(Panel, ShapeContainer);
 
 		// load UI definition file
-		if(new.target !== Panel && this.applyUIDefinition != null) this.applyUIDefinition(new.target.name); // must be called AFTER super()
+		if(new.target !== Panel && this._applyUIDefinition != null) this._applyUIDefinition(new.target.name); // must be called AFTER super()
 	}
 
 	/**

package/classes/UIComponent.js

@@ -251,9 +251,9 @@ class UIComponent
 	}
 
 	/**
-	 * Gets a parent Object. If this component wasn't added to any container component, then `null` is returned.
+	 * Gets a parent container component. If this component wasn't added to any container component, then `null` is returned.
 	 * @readonly
-	 * @type {Object|undefined}
+	 * @type {UIComponent|null}
 	 */
 	get parent()
 	{
@@ -263,6 +263,47 @@ class UIComponent
 		return UIComponent.get(this.parent_id);
 	}
 
+	/**
+	 * Gets a previous sibling component. If this component wasn't added to any container component, then `null` is returned.
+	 * @readonly
+	 * @type {UIComponent|null}
+	 * @since 1.0.3
+	 */
+	get previousSibling()
+	{
+		if(this.parent == null) return null;
+		let i = this.parent.childIndex(this);
+		if(i === 0) return null;
+		return this.parent.child(i - 1);
+	}
+
+	/**
+	 * Gets a next sibling component. If this component wasn't added to any container component, then `null` is returned.
+	 * @readonly
+	 * @type {UIComponent|null}
+	 * @since 1.0.3
+	 */
+	get nextSibling()
+	{
+		if(this.parent == null) return null;
+		let i = this.parent.childIndex(this);
+		return this.parent.child(i + 1);
+	}
+
+	/**
+	 * Gets an array of sibling components.
+	 * @readonly
+	 * @type {UIComponent[]}
+	 * @since 1.0.3
+	 */
+	get siblings()
+	{
+		if(this.parent == null) return [];
+		const _siblings = this.parent.children;
+		_siblings.splice(_siblings.indexOf(this), 1);
+		return _siblings;
+	}
+
 	/**
 	 * Gets a Window component containing this component. Returns `null` if no Window contain this component.
 	 * @readonly
@@ -404,7 +445,7 @@ class UIComponent
 
 	/**
 	 * Checks if this component is inside specified ancestor component (at any level, not just direct child).
-	 * @param {Object} ancestor - Ancestor component to test against
+	 * @param {UIComponent} ancestor - Ancestor component to test against
 	 * @return {boolean}
 	 * @see ComponentContainer#contains
 	 */

package/classes/Window.js

@@ -129,7 +129,7 @@ class Window extends ShapeContainer
 		//this.finalize(ShapeContainer, Window);
 
 		// load UI definition file
-		if(new.target !== Window && this.applyUIDefinition != null) this.applyUIDefinition(new.target.name); // must be called AFTER super()
+		if(new.target !== Window && this._applyUIDefinition != null) this._applyUIDefinition(new.target.name); // must be called AFTER super()
 	}
 
 	/**

package/enums.js

@@ -160,7 +160,7 @@ export const SelectionMode = Object.freeze({Single: 0, Range: 1, Multiple: 2});
  * textarea.font({name: FontFamily.SansSerif});
  *
  * @example <h2>Setting Text shape font:</h2>
- * let text = new Text("Hello World", {name: FontFamily.Fantasy, size: 30});
+ * let text = new TextShape("Hello World", {name: FontFamily.Fantasy, size: 30});
  */
 export const FontFamily = Object.freeze({Serif: "serif", SansSerif: "sans-serif", Monospaced: "monospace", Cursive: "cursive", System: "system-ui", Fantasy: "fantasy"});
 

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "swing-ui",
-	"version": "1.0.1",
-	"description": "Graphic User Interface for JavaScript",
+	"version": "1.0.4",
+	"description": "Cross-platform Graphic User Interface for Node.js, Bun and Deno 2+",
 	"main": "index.js",
 	"scripts": {
 		"docs": "jsdoc -c docs-files/jsdoc.json",

package/types/classes/UIComponent.d.ts

@@ -89,11 +89,32 @@ export class UIComponent {
      */
     readonly get id(): number;
     /**
-     * Gets a parent Object. If this component wasn't added to any container component, then `null` is returned.
+     * Gets a parent container component. If this component wasn't added to any container component, then `null` is returned.
      * @readonly
-     * @type {Object|undefined}
+     * @type {UIComponent|null}
      */
-    readonly get parent(): Object | undefined;
+    readonly get parent(): UIComponent | null;
+    /**
+     * Gets a previous sibling component. If this component wasn't added to any container component, then `null` is returned.
+     * @readonly
+     * @type {UIComponent|null}
+     * @since 1.0.3
+     */
+    readonly get previousSibling(): UIComponent | null;
+    /**
+     * Gets a next sibling component. If this component wasn't added to any container component, then `null` is returned.
+     * @readonly
+     * @type {UIComponent|null}
+     * @since 1.0.3
+     */
+    readonly get nextSibling(): UIComponent | null;
+    /**
+     * Gets an array of sibling components.
+     * @readonly
+     * @type {UIComponent[]}
+     * @since 1.0.3
+     */
+    readonly get siblings(): UIComponent[];
     /**
      * Gets a Window component containing this component. Returns `null` if no Window contain this component.
      * @readonly

package/types/enums.d.ts

@@ -225,7 +225,7 @@ export type FontFamily = string;
  * textarea.font({name: FontFamily.SansSerif});
  *
  * @example <h2>Setting Text shape font:</h2>
- * let text = new Text("Hello World", {name: FontFamily.Fantasy, size: 30});
+ * let text = new TextShape("Hello World", {name: FontFamily.Fantasy, size: 30});
  */
 export const FontFamily: Readonly<{
     Serif: "serif";