swing-ui 0.1.25 → 1.0.1

package/classes/MediaPlayer.js

@@ -0,0 +1,504 @@
+
+import {UIComponent} from "./UIComponent.js";
+
+/**
+ * Media player is an audio and video player component capable of playing video & audio files, video & audio live streams, video & audio from URL, and from audio & video capture devices, like microphone, web cam and other video capture devices.
+ * It's done with the help of pre-installed FFMPEG, so FFMPEG is required to be installed for this to work. FFMPEG is a free open-source software.
+ * @class
+ * @global
+ * @example <h2>Examples of formats of commonly used objects with media player:</h2>
+ *
+ * VideoDevice {
+ *     [name]: string,          // Name of the video input device.
+ *     id: string,              // ID if the video input device.
+ *     [formats]: VideoFormat[],// Available video formats (present only when getting video input devices)
+ *     [format]: VideoFormat    // Chosen video format to use (required when setting a video input device).
+ * }
+ *
+ * VideoFormat {
+ *      size: string,           // Video frame size in pixels
+ *      pixel_format: string    // Frame image encoding coming out of the device (e.g.: "yuyv422")
+ *      [fps]: number           // (required only when setting a video input device)
+ *      [min_fps]: number,      // Minimum available frame rate. For example 7.5 fps.
+ *      [max_fps]: number,      // Maximum available frame rate. For example 30 fps.
+ * }
+ *
+ * AudioDevice {
+ *     [name]: string,              // Name of audio device.
+ *     id: string,                  // ID of audio device. (required when setting an audio device).
+ *     [formats]: AudioFormats[],   // Available audio formats (present only when getting audio devices).
+ *     [format]: AudioFormat,       // Audio format to use (required when setting an audio device).
+ * }
+ *
+ * AudioFormat {
+ *      channels: number,   // Audio channels available
+ *      bits: number,       // Bits per sample
+ *      [rate]: number,     // Sample rate in Hz. It's only used for audio input device formats (not output). Set it when setting an audio output device.
+ *      [encoding]: string  // Audio encoding (e.g.: PCM_UNSIGNED, PCM_SIGNED). (Only available in audio output device formats).
+ * }
+ */
+export class MediaPlayer extends UIComponent
+{
+	/**
+	 * Enum for media player states.
+	 *
+	 * @readonly
+	 * @enum {number}
+	 * @property {number} NoMedia - No media loaded.
+	 * @property {number} Stopped - Media is stopped.
+	 * @property {number} Playing - Media is playing.
+	 * @see MediaPlayer#state
+	 * @example
+	 * if(player.state === MediaPlayer.State.Playing)
+	 * {
+	 *     console.log("Player is playing");
+	 * }
+	 */
+	static State = Object.freeze({NoMedia: 0, Stopped: 1, Playing: 2});
+	
+	/**
+	 * Enum for video interpolation methods. Used to smooth resized video and reduce pixelation.
+	 *
+	 * @readonly
+	 * @enum {number}
+	 * @property {number} None - No interpolation applied.
+	 * @property {number} ByGUI - Interpolation performed by the GUI.
+	 * @property {number} ByFFMPEG - Interpolation performed by FFMPEG.
+	 * @example
+	 * player.interpolation(MediaPlayer.Interpolation.ByFFMPEG);
+	 */
+	static Interpolation = Object.freeze({None: 0, ByGUI: 1, ByFFMPEG: 2});
+	
+	/**
+	 * Enum for subtitle background styles. Used to enhance subtitle readability over video. Background color can be changed by {@link MediaPlayer#subtitleBackground}
+	 *
+	 * @readonly
+	 * @enum {number}
+	 * @property {number} None - Subtitles not visible (only sent as a player event).
+	 * @property {number} Plain - Visible but without a background.
+	 * @property {number} Shadow - Subtitle has a shadow background. (Default)
+	 * @property {number} Box - Subtitle is placed inside a solid box.
+	 * @property {number} RoundBox - Subtitle is placed inside a solid box with rounded corners.
+	 * @see MediaPlayer#subtitleStyle
+	 * @see MediaPlayer#subtitleBackground
+	 * @example
+	 * player.subtitleStyle(MediaPlayer.SubtitleStyle.Box);
+	 */
+	static SubtitleStyle = Object.freeze({None: 0, Plain: 1, Shadow: 2, Box: 3, RoundBox: 4});
+	
+	#SourceType = {File: 0, URL: 1, InputDevice: 2};
+	#source = null; // {type: SourceType, ...}
+	
+	/**
+	 * Initializes the MediaPlayer UI component.
+	 * @see VideoDevice
+	 * @see AudioDevice
+	 * @see VideoFormat
+	 * @see AudioFormat
+	 */
+	constructor()
+	{
+		super("MediaPlayer", (new.target === MediaPlayer));
+		
+		this.finalize(MediaPlayer);
+	}
+	
+	/**
+	 * Sets the path to ffmpeg executable file, preferably absolute path. Default is `ffmpeg`, and it requires the path to ffmpeg to be added to `Path` environment variable.
+	 * When setting path, `boolean` is returned whether path is valid and accepted.
+	 * When getting value, `string` of previously specified or default value is returned.
+	 *
+	 * @param {string} [path] - Path to the executable FFMPEG file. Default path is "ffmpeg".
+	 * @return {boolean|string} Returns `string` path when getting, or `boolean` when setting. `boolean` indicates if specified path was accepted (if it exists).
+	 */
+	static ffmpegPath(...args)
+	{
+		const req = {system: "ffmpegPath"};
+		if(args.length > 0) req.value = args[0];
+		return ui.sendToGUI(req, (r) => {return r.value;});
+	}
+	
+	/**
+	 * Sets a path of a local media file as a new media source. Resets player and overrides previously set source.
+	 *
+	 * @param {string} path - Path to media file.
+	 * @param {number} [videoStream] - If the media file has more than one video stream, specify which one to use. Default is 0. For audio-only files this is ignored.
+	 * @param {number} [audioStream] - If the media file has more than one audio stream (such as multiple languages), specify which one to use. Default is 0. For media without audio stream this is ignored.
+	 * @param {number|string|null} [subtitleStream=null] - Index of a subtitle stream or a subtitles file path. Default is `null` for no subtitles.
+	 * @return {MediaPlayer} Returns `this` component instance.
+	 */
+	setFile(path, videoStream = 0, audioStream = 0, subtitleStream = null)
+	{
+		this.#source = {
+			type: this.#SourceType.File,
+			path: path,
+			videoStream: videoStream,
+			audioStream: audioStream,
+			subtitleStream: subtitleStream
+		};
+		
+		return this.property("source", [this.#source]);
+	}
+	
+	/**
+	 * Sets URL of the media source. Resets player and overrides previously set source.
+	 *
+	 * @param {string} url - URL of media.
+	 * @param {number} [videoStream] - If the media has more than one video stream, specify which one to use. Default is 0. For audio-only files this is ignored.
+	 * @param {number} [audioStream] - If the media has more than one audio stream (such as multiple languages), specify which one to use. Default is 0. For media without audio stream this is ignored.
+	 * @param {number|null} [subtitleStream=null] - Index of a subtitle stream. There may be multiple streams in case of multiple languages. Default is NULL for no subtitles.
+	 * @param {string|null} [format] - Recommended to set for live video streams, such as web cam stream. This value is set as "-input_format" option for FFMPEG command. For example: mjpeg, rtsp, flv, mpegts, hls, http, https, srt or icecast.
+	 * @param {boolean} [lowLatency] - Set to TRUE to use ffmpeg options for low latency for live video streams (ffmpeg options such as low buffering).
+	 * @return {MediaPlayer} Returns `this` component instance.
+	 */
+	setURL(url, videoStream = 0, audioStream = 0, subtitleStream = null, format = null, lowLatency = false)
+	{
+		this.#source = {
+			type: this.#SourceType.URL,
+			url: url,
+			videoStream: videoStream,
+			audioStream: audioStream,
+			subtitleStream: subtitleStream,
+			format: format,
+			lowLatency: lowLatency
+		};
+		
+		return this.property("source", [this.#source]);
+	}
+	
+	/**
+	 * Sets video device and audio device to use as video and audio source. Resets player and overrides previously set source.
+	 * To get a list of available devices and their details getters {@link MediaPlayer#videoInputDevices} and {@link MediaPlayer#audioInputDevices} can be used.
+	 *
+	 * @param {VideoDevice|null} videoDevice - Video device object (camera or video capture card). Set to `null` to omit video device.
+	 * @param {AudioDevice|null} [audioDevice=undefined] - Audio device object (microphone, audio capture card or system audio). Omit or set to `null` to omit audio device.
+	 * @return {MediaPlayer} Returns `this` component instance.
+	 */
+	setInputDevice(videoDevice, audioDevice = undefined)
+	{
+		this.#source = {type: this.#SourceType.InputDevice};
+		if(videoDevice != null) this.#source.video = videoDevice;
+		if(audioDevice != null) this.#source.audio = audioDevice;
+		
+		return this.property("source", [this.#source]);
+	}
+	
+	/**
+	 * Sets or gets current playing time in seconds. Decimal points are allowed (e.g. player.seek(165.43); ).
+	 *
+	 * @param {number} [seconds] - Sets seek time in seconds. Two decimal points allowed for more precision.
+	 * @return {MediaPlayer} Returns `this` component instance.
+	 */
+	seek(...args)
+	{
+		if(this.#source == null) return "Media source not set";
+		
+		return this.property("seek", args);
+	}
+	
+	/**
+	 * Makes the media player start media playback (assuming that media was previously specified using setFile(), setURL() or setInputDevice() functions).
+	 *
+	 * @return {MediaPlayer} Returns `this` component instance.
+	 */
+	play()
+	{
+		return this.property("control", ["play"]);
+	}
+	
+	/**
+	 * Makes media player pause the playback.
+	 *
+	 * @return {MediaPlayer} Returns `this` component instance.
+	 */
+	pause()
+	{
+		return this.property("control", ["pause"]);
+	}
+	
+	/**
+	 * Makes media player stop the playback. Seek time resets to 0, so play() function would start the playback from beginning.
+	 *
+	 * @return {MediaPlayer} Returns `this` component instance.
+	 */
+	stop()
+	{
+		return this.property("control", ["stop"]);
+	}
+	
+	/**
+	 * Sets or get whether video frame should be resized to fit the media player component.
+	 *
+	 * @param {boolean} [fit] - `true` to resize video to fit player component, `false` to use actual resolution of the video.
+	 * @returns {boolean|MediaPlayer} Returns `this` component instance if setting, `boolean` if getting.
+	 */
+	fit(...args)
+	{
+		return this.property("fit", args.length > 0 ? [args[0] === true] : []);
+	}
+	
+	/**
+	 * Sets or get hardware acceleration setting for ffmpeg video decoding.
+	 * To get a list of supported hardware acceleration options use `hardwareAccelerations` getter property.
+	 *
+	 * @param {string} [hwaccel] - `-hwaccel` option value for FFMPEG. Default is "auto". `null` or "none" to disable hardware acceleration.
+	 * @returns {string|MediaPlayer} Returns `this` component instance if setting, `string` if getting.
+	 */
+	hardwareAcceleration(...args)
+	{
+		return this.property("hardwareAcceleration", args);
+	}
+	
+	/**
+	 * Gets a list of supported hardware acceleration options that can be used by FFMPEG on this system.
+	 * Returns an array of supported hardware accelerations that can be used to decode a video by FFMPEG.
+	 * @readonly
+	 * @type {string[]}
+	 */
+	get hardwareAccelerations()
+	{
+		return this.property("hardwareAccelerations", []);
+	}
+	
+	/**
+	 * Gets an array of enabled video input devices (such as WebCam or video capture device) with an array of accepted video formats (size and frame rate).
+	 * Returns an array of objects that contain information about each video input device recognized by FFMPEG.
+	 * NOTE: On linux it is recommended to have `v4l2-utils` installed for fast video devices lookup, otherwise alternative method take a lot longer to complete and may return less video formats and FPS options.
+	 *
+	 * @readonly
+	 * @type {VideoDevice[]}
+	 * @see VideoDevice
+	 */
+	get videoInputDevices()
+	{
+		return ui.sendToGUI({control: this.id, get: "inputDevices", data: "video"});
+	}
+	
+	/**
+	 * Gets an array of enabled audio input devices (such as microphone, system sound) with an array of accepted audio formats (sample rate, bit depth, and amount of channels).
+	 * Returns an array of objects that contain information about each audio input device recognized by FFMPEG.
+	 *
+	 * @readonly
+	 * @type {AudioDevice[]}
+	 * @see AudioDevice
+	 */
+	get audioInputDevices()
+	{
+		return ui.sendToGUI({control: this.id, get: "inputDevices", data: "audio"});
+	}
+	
+	/**
+	 * Gets a list of output audio devices (such as speaker, bluetooth headphones, etc.) and their accepted audio formats.
+	 * These devices may be specified to be used while playing video or audio.
+	 * Returns an array of objects that contain information about each audio output device recognized by FFMPEG.
+	 *
+	 * @readonly
+	 * @type {AudioDevice[]}
+	 * @see AudioDevice
+	 */
+	get audioOutputDevices()
+	{
+		return ui.sendToGUI({control: this.id, get: "outputDevices", data: "audio"});
+	}
+	
+	/**
+	 * Sets or gets a current audio output device. To obtain a list of devices you can use  "audioOutputDevices" getter property (e.g. player.audioOutputDevices), which returns a list of devices with their ID and formats.
+	 * Device name or ID may be passed, but name is preferred, because when devices are added or removed, their ID may change, because it's just an index of the list of devices (enumerator), but names are unique.
+	 *
+	 * @param {string} [name] - Audio output device name (or ID) obtained from {@link AudioDevice} object using `{@link MediaPlayer#audioOutputDevices}` getter.
+	 * @return {MediaPlayer|string} Returns `this` component instance when setting, otherwise current audio output device info as an `object`.
+	 * @see AudioDevice
+	 * @see MediaPlayer#audioOutputDevice
+	 * @example <h2>Getting a list of devices and setting first one:</h2>
+	 * const player = new MediaPlayer();
+	 * const _devices = player.audioOutputDevices;
+	 *
+	 * player.audioOutputDevice(_devices[0].name);
+	 *
+	 */
+	audioOutputDevice(...args)
+	{
+		return this.property("audioOutputDevice", args);
+	}
+	
+	/**
+	 * Registers, unregisters, and gets an Array of event handlers for the MediaPlayer.
+	 *
+	 * @param {function(PlayerEvent):any} [callback] - Handler function receiving {@link PlayerEvent} object. Pass `null` to unregister all handler callbacks.
+	 * @param {boolean} [remove] - Set to `true` to unregister the handler function.
+	 * @return {MediaPlayer|function[]} Returns `this` component instance if adding or removing the handler, otherwise returns an array of added handler functions.
+	 * @see PlayerEvent
+	 * @see Media
+	 * @see VideoStream
+	 * @see AudioStream
+	 * @see SubtitleStream
+	 * @example
+	 * // Example of PlayerEvent object
+	 * PlayerEvent {
+	 *     type: string,        // One of: `loadstart`, `loadedmetadata`, `seeking`, `timeupdate`, `play`, `stop`.
+	 *     mediaType: string,   // The type of media that is set to play in the player. One of: `File`, `InputDevice`, `URL`.
+	 *     media: Media,        // A Media formatted object that contains details about loaded media.
+	 *     currentTime: number, // Current play time.
+	 *     duration: number,    // Duration of the media in seconds. When event type is `timeupdate`.
+	 *     reason: string,      // Reason for stopping: `Pause`, `EndOfMediaFile`
+	 * }
+	 *
+	 * // Example of a VideoStream object
+	 * VideoStream {
+	 *      sampleWidth: number,
+	 *      sampleHeight: number,
+	 *      width: number,
+	 *      height: number,
+	 *      pixelAspectRatio: string,
+	 *      displayAspectRatio: string,
+	 *      frameRate: number,
+	 *      codec: string,
+	 *      pixelFormat: string,
+	 *      progressive: boolean,
+	 *      default: boolean
+	 * }
+	 *
+	 * // Example of a AudioStream object
+	 * AudioStream {
+	 *      sampleRate: number,
+	 *      channels: number,
+	 *      bitDepth: number,
+	 *      codec: string,
+	 *      default: boolean
+	 * }
+	 *
+	 * // Example of a SubtitleStream object
+	 * SubtitleStream {
+	 *      language: string,
+	 *      codec: string,
+	 *      default: boolean
+	 * }
+	 */
+	onPlayerEvents(callback, ...args)
+	{
+		return this.event("onPlayerEvents", callback, args[0] ?? false);
+	}
+	
+	/**
+	 * Gets the current state of the media player component. The returned value corresponds to {@link MediaPlayer#State}.
+	 *
+	 * @readonly
+	 * @see MediaPlayer#State
+	 * @type {MediaPlayer.State}
+	 */
+	get state()
+	{
+		return this.property("state", []);
+	}
+	
+	/**
+	 * Sets or gets the method how smoothing is done when video is resized.
+	 * `ByGUI` means that video frames are smoothed out while drawing on the player component in GUI.
+	 * `ByFFMPEG` means that ffmpeg will resize video to the size of the component before sending it to GUI. When component is resized while video is playing, the video will have to stop and then start again at the same position.
+	 * `None` means that video will not be smoothed, and when it's resized, it will look pixelated.
+	 *
+	 * @param {MediaPlayer.Interpolation} [interpolation] - Specifies a method of smoothing video when it's displayed in not it's original size. Options: MediaPlayer.Interpolation.[None|ByGUI|ByFFMPEG]
+	 * @return {MediaPlayer.Interpolation|MediaPlayer} When setting value an instance of `this` object is returned, otherwise a current value is returned.
+	 */
+	interpolation(...args)
+	{
+		return this.property("interpolation", args.length > 0 ? [args[0]] : []);
+	}
+	
+	/**
+	 * Sets or gets whether to show visualizer for audio-only streams (when no video stream is present, such as when playing music).
+	 *
+	 * @param {boolean} enable - Use or not use visualizer for audio-only streams.
+	 * @return {boolean|MediaPlayer} When setting value an instance of `this` object is returned, otherwise a current value is returned.
+	 */
+	visualizer(...args)
+	{
+		return this.property("visualizer", args);
+	}
+	
+	/**
+	 * Sets or get value if media should be looping. Valid values are `true`, `false`, or a positive integer how many times it should be looped.
+	 * The stream continues even though video or audio repeats, after first iteration current time stops updating because it would show time of the
+	 * total playback, not the current media time. If you need correct media progress time, implement your own loop by starting video again when it stops.
+	 *
+	 * @param {boolean|number} [loop] - Loop or not to loop `boolean`, or a `number` how many times to loop.
+	 * @return {boolean|number|MediaPlayer} When setting a value, an instance of `this` object is returned; otherwise a current value is returned.
+	 */
+	loop(...args)
+	{
+		if(args.length > 0)
+		{
+			if(typeof args[0] === "boolean") // convert boolean to int
+			{
+				args[0] = args[0] ? -1 : 0;
+			}
+			else // validate int
+			{
+				args[0] = Math.max(-1, args[0]);
+			}
+		}
+		
+		return this.property("loop", args);
+	}
+	
+	/**
+	 * Sets or gets the mute state of the media player audio. If muted, it will produce silence instead of provided sound.
+	 * Its only used if audio stream is present.
+	 *
+	 * @param {boolean} mute - `true` to mute, `false` to unmute.
+	 * @return {boolean|MediaPlayer} When setting value an instance of `this` object is returned, otherwise a current value is returned.
+	 */
+	mute(...args)
+	{
+		return this.property("mute", args);
+	}
+	
+	/**
+	 * Sets or gets the background color of subtitles text. The background is used for improved readability when video colors are similar to colors of subtitles text.
+	 *
+	 * @param {String} [color] - Color string (e.g.: "#000000" or "00000000"). Supports alpha channel for setting transparency.
+	 * @return {String|MediaPlayer} If called without parameters, the instance of the MediaPlayer component is returned, otherwise current value is returned.
+	 * @see MediaPlayer#subtitleStyle
+	 */
+	subtitleBackground(...args)
+	{
+		return this.property("subtitleBackground", args);
+	}
+	
+	/**
+	 * Sets or gets the style of the subtitles. When `None`, subtitles are not visible. The background is used for improved readability when video colors are similar to colors of subtitles text.
+	 *
+	 * @param {MediaPlayer.SubtitleStyle} [style] - Style of the subtitle, or `None` to make it not visible. It's still sent as a `PlayerEvent`.
+	 * @return {MediaPlayer.SubtitleStyle|MediaPlayer} If called without parameters, the instance of the MediaPlayer component is returned, otherwise current value is returned.
+	 * @see MediaPlayer#SubtitleStyle
+	 * @see MediaPlayer#subtitleBackground
+	 * @see PlayerEvent
+	 */
+	subtitleStyle(...args)
+	{
+		return this.property("subtitleStyle", args);
+	}
+	
+	/**
+	 * Sets video filters to be applied to the video video by FFMPEG. If one of preset filters is not enough, feel free to set a `custom` filter (any ffmpeg video filter that is compatible with -vf option).
+	 *
+	 * @param {VideoFilters|null} filters - A VideoFilters object. Check out `VideoFilters` type definition for details. Set to `null` to clear previously set video filters.
+	 * @returns {MediaPlayer} Returns this MediaPlayer instance for chaining.
+	 * @see VideoFilters
+	 */
+	videoFilters(filters)
+	{
+		return this.property("videoFilters", [filters]);
+	}
+
+	/**
+	 * Sets or gets component opacity float value between 0 and 1 inclusive.
+	 *
+	 * @param {number} [opacity] - A number between 0 and 1 inclusive.
+	 * @return {number|this} If `opacity` argument is provided, `this` component is returned, otherwise opacity `number` is returned.
+	 */
+	opacity(...args)
+	{
+		return this.property("opacity", args);
+	}
+}

package/classes/Menu.js

@@ -0,0 +1,74 @@
+
+import {ComponentContainer} from "./ComponentContainer.js";
+import {MenuItem} from "./MenuItem.js";
+
+/**
+ * Menu UI component is used to create menus in a menu bar or create a submenu in context menu. It extends MenuItem class.
+ * Menu object can be added to MenuBar, ContextMenu, or another Menu object to create a submenu.
+ * @class
+ * @global
+ * @extends MenuItem
+ */
+class Menu extends ComponentContainer
+{
+	/**
+	 * Menu constructor. Creates an instance of Menu UI component.
+	 * @param {string} [text] - Text of the Menu component.
+	 */
+	constructor(...args)
+	{
+		super("Menu", (new.target === Menu), ...args);
+		this.finalize(Menu, ComponentContainer);
+	}
+
+	/**
+	 * Registers, unregisters and gets a list of handler functions for the menu popup events (when the menu becomes expended and collapsed).
+	 *
+	 * @param {function(PopupEvent):any|null} [callback] - Event handler function that receives a {@link PopupEvent} as an argument. Pass `null` to unregister all registered callbacks.
+	 * @param {boolean} [remove] - Set to `true` to unregister the handler function.
+	 * @return {function[]|ComboBox} Returns an array of registered handler functions if arguments are omitted, otherwise returns `this` component instance.
+	 * @see PopupEvent
+	 * @example
+	 * mainForm.mainMenuBar = new MenuBar();
+	 * let handler = function(e){console.log(e);}
+	 * mainForm.fileMenu = new Menu("File").addTo(mainForm.mainMenuBar).onPopupEvents(handler);
+	 *
+	 * // event Object format:
+	 * const e = {
+	 *   target: object,        // The component that triggered the event.
+	 *   type: string,          // `show`, `hide`, `cancel`.
+	 *   invoker: Object        // UI Component that invoked the popup, or `null` if it was invoked programmatically.
+	 *   x: number,             // X position relative to invoker. Only present when invoker is not `null`.
+	 *   y: number,             // Y position relative to invoker. Only present when invoker is not `null`.
+	 *   screenX: number,       // X position relative to default screen.
+	 *   screenY: number,       // Y position relative to default screen.
+	 *   interactive: boolean,  // Indicates if the popup was triggered by user's interaction (not programmatically).
+	 * };
+	 */
+	onPopupEvents(callback, ...args)
+	{
+		return this.event("onPopupEvents", callback, args[0] ?? false);
+	}
+	
+	/**
+	 * Adds a child component to this container component. Overrides UIComponent.addChild() to validate components being added.
+	 *
+	 * @param {Object} component - UI Component that can be a child of this component.
+	 * @param {...any} [data_or_index] - Argument to pass index at which to insert the child. By default component is added to the end.
+	 * @returns {this}
+	 */
+	addChild(component, ...data)
+	{
+		if(!(component instanceof UIComponent) || !(component instanceof Menu || component instanceof MenuItem || component instanceof RadioButtonMenuItem || component instanceof CheckBoxMenuItem || component instanceof Separator))
+		{
+			throw new Error(component.constructor.name + " cannot be added to Menu");
+		}
+		
+		return super.addChild(component, ...data);
+	}
+}
+
+ComponentContainer.implementClass(Menu, MenuItem);
+
+export {Menu};
+

package/classes/MenuBar.js

@@ -0,0 +1,56 @@
+
+import {ComponentContainer} from "./ComponentContainer.js";
+
+/**
+ * MenuBar UI component is used to create a menu bar at the top of the application. It extends UIComponent class.
+ *
+ * Menu bar can be added to Window in two ways, by setting the MenuBar as the Window's main menu bar using window.menuBar(menuBar) method, or adding the MenuBar object as any other UI component using menuBar.addTo(window) or window.addChild(menuBar).
+ *
+ * Using window.menuBar(menuBar) automatically positions and resizes the menu bar to Window's width and in MacOS it uses it as the main menu bar shows at the top menu bar of the operating system.
+ *
+ * Adding the menu bar as a regular UI component to Window will keep the menu inside the Window and you will have to resize it by setting the desired width (and optionally height).
+ *
+ * Only Menu objects can be added to MenuBar.
+ *
+ * Extends {@link ComponentContainer}, which extends {@link UIComponent}.
+ * @class
+ * @global
+ */
+export class MenuBar extends ComponentContainer
+{
+	/**
+	 * Constructor of MenuBar UI component.
+	 *
+	 * @param {string} [text] - Text displayed in the menu
+	 */
+	constructor()
+	{
+		if(arguments.length > 0)
+		{
+			super("MenuBar", (new.target === MenuBar), arguments[0]);
+		}
+		else
+		{
+			super("MenuBar", (new.target === MenuBar));
+		}
+		
+		this.finalize(MenuBar, ComponentContainer);
+	}
+	
+	/**
+	 * Adds a child menu component to this menu bar. Overrides UIComponent.addChild() to validate components being added.
+	 *
+	 * @param {Object} component - UI Component that can be a child of this component.
+	 * @param {...any} [index] - Argument to pass index at which to insert the child. By default component is added to the end.
+	 * @returns {this} Returns an instance of `this` component.
+	 */
+	addChild(component, ...data)
+	{
+		if(!(component instanceof Menu))
+		{
+			throw new Error(component.constructor.name + " cannot be added to MenuBar.");
+		}
+		
+		return super.addChild(component, ...data);
+	}
+}