swing-ui 0.1.25 → 1.0.3

package/classes/MenuItem.js

@@ -0,0 +1,92 @@
+
+import {UIComponent} from "./UIComponent.js";
+
+/**
+ * Menu item UI component that extends UIComponent class.
+ * This class is extended by Menu, CheckBoxMenuItem, and RadioButtonMenuItem.
+ * For more methods and properties for this component or sub-components check UIComponent class.
+ * @class
+ * @global
+ */
+export class MenuItem extends UIComponent
+{
+	/**
+	 * Constructor for Menu, MenuItem, CheckBoxMenuItem, and RadioButtonMenuItem.
+	 *
+	 * @param {string} [text] - Text displayed in the menu item
+	 */
+	constructor()
+	{
+		super(new.target.name, (new.target === MenuItem || new.target === Menu || new.target === CheckBoxMenuItem || new.target === RadioButtonMenuItem), ...arguments); // We use new.target.name to use the name of the class or subclasses that's being instantiated
+		
+		this.finalize(...(new.target === MenuItem ? [new.target] : [MenuItem, new.target])); // lock this class's methods and subclasses'
+	}
+	
+	/**
+	 * Sets keyboard shortcut (accelerator) to menu item type of components: MenuItem, CheckBoxMenuItem, RadioButtonMenuItem. See examples below. Allows to activate the menu item action using specified keyboard key combination on keyboard. This shortcut is usually display in the right side of the mnu item's text.
+	 *
+	 * @param {string} keys - Key combination as a string. See example how to construct it.
+	 * @returns String Description of keyboard shortcut
+	 * @example
+	 * Modifiers: CTRL|CONTROL|SHIFT|ALT|ALTGRAPH|META
+	 *
+	 * Keys: A-Z|0-9|NUMPAD[0-9]|SPACE|INSERT|ESCAPE|F[1-24]|TAB|ADD|SUBTRACT|DELETE|BACK_SPACE|BACK_SLASH|
+	 * BRACELEFT|BRACERIGHT|OPEN_BRACKET|CLOSE_BRACKET|SEMICOLON|COMMA|CAPS_LOCK|BACK_QUOTE|MINUS|PERIOD|
+	 * UP|DOWN|RIGHT|LEFT|MULTIPLY|DIVIDE|NUM_LOCK|HOME|END|PAGE_UP|PAGE_DOWN|PAUSE|SCROLL_LOCK|WINDOWS|
+	 * CONTEXT_MENU|DECIMAL|ENTER
+	 *
+	 * Example key combinations: CTRL+Q, ALT+F1, CTRL+SHIFT+5, CTRL+N4, META+SHIFT+6, DELETE+SHIFT, SHIFT+UP, CTRL+OPEN_BRACKET, ATL+DOWN
+	 *
+	 * menuItem1.accelerator("CTRL+Q");
+	 * menuItemUP.accelerator("SHIFT+NUMPAD[8]");
+	 *
+	 */
+	accelerator()
+	{
+		if(this instanceof Menu) throw new Error(`Menu doesn't support accelerator. Use mnemonics instead.`);
+
+		if(arguments.length > 0)
+		{
+			ui.sendToGUI({control: this.id, set: "accelerator", value: arguments[0]});
+			return this;
+		}
+		else
+		{
+			return ui.sendToGUI({control: this.id, get: "accelerator"});
+		}
+	}
+	
+	/**
+	 * Gets or sets the mnemonic (keyboard shortcut key) for menu item type of components: Menu, MenuItem, CheckBoxMenuItem, RadioButtonMenuItem. It's not same as setting accelerator(...).
+	 * A mnemonic allows users to activate the menu item using the keyboard (typically Alt + key).<br />
+	 * NOTE: Not all systems and UIs show underline under mnemonic character. Some systems only show it after Alt key was pressed.
+	 *
+	 * @param {number|string|null} [key] - A key code integer or a single ASCII character representing the mnemonic key (case-insensitive). If omitted, acts as a getter. To clear mnemonic, pass `0`, `""`, or `null`.
+	 * @returns {number|MenuItem} If called without arguments, returns the current mnemonic key code integer. If called with an argument, returns `this` instance object for chaining.
+	 * @example
+	 * menuItem.text("Quit").mnemonic("q"); // Makes letter Q to be used as the keyboard shortcut key
+	 * menuItem.mnemonic(""); // clears the mnemonic
+	 */
+	mnemonic()
+	{
+		return this.property("mnemonic", arguments);
+	}
+	
+	/**
+	 * Opens this menu item and all of its parent menus or context menu.
+	 *
+	 * @param {object} [position] - Example: {x: 100, y: 100}. Use only when root ancestor of this item is ContextMenu, to specify position where to position the ContextMenu.
+	 *                                     If invoker is specified, then position is relative to position of invoker component, otherwise it's a screen position.
+	 * @param {object} [invoker] - Used to set invoker if the context menu isn't assigned to any object and you want to be able to get invoker by using "invoker" getter.
+	 * @return {MenuItem} Returns `this` MenuItem instance.
+	 */
+	open(position = null, invoker = null)
+	{
+		const msg = {set: "open", control: this.id, data: {}};
+		if(position != null) msg.data.pos = position;
+		if(invoker instanceof UIComponent) msg.data.invoker = invoker.id;
+		
+		ui.sendToGUI(msg);
+		return this;
+	}
+}

package/classes/Panel.js

@@ -0,0 +1,50 @@
+
+import {ShapeContainer} from "./ShapeContainer.js";
+
+/**
+ * Panel UI component, rectangular UI component that can be used in many different ways:
+ *  - Container for other components
+ *  - As a horizontal/vertical line or a rectangle
+ *  - Container with scroll bars that can contain objects even outside its boundaries.
+ *  - Background can be set to color, image, and gradient (like in CSS), which opens lots of opportunities, such as animating background, streaming MJPEG video by setting frames as background of the panel sequentially, and more.
+ *  - As a canvas to draw Shapes or create an interactive game using Shapes drawn on this canvas.
+ *
+ *  Panel class extends ComponentContainer and ShapeContainer, which extend UIComponent
+ *
+ *  NOTE: Add Panel to Tabs, SplitView, or ScrollPane containers before adding child components to the panel to have expected behavior when setting anchors to child components of the Panel.
+ *  @class
+ *  @global
+ *  @see ShapeContainer
+ *  @see ComponentContainer
+ */
+class Panel extends ShapeContainer
+{
+	_shapes = [];
+	temp_token = undefined;
+
+	/**
+	 * Panel constructor. Creates an instance of Panel UI component.
+	 *@param {string} [text] - Text associated with this Panel. It will be used, for example, for a tab name when this panel is added to Tabs component.
+	 */
+	constructor(...args)
+	{
+		super("Panel", (new.target === Panel), ...args);
+		//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()
+	}
+
+	/**
+	 * 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);
+	}
+}
+
+export {Panel};

package/classes/PasswordField.js

@@ -0,0 +1,47 @@
+
+import {TextComponent} from "./TextComponent.js";
+
+/**
+ * Password field is used to type masked text. Use echoChar() method to set a custom mask character.
+ * All other methods are inherited from TextComponent and UIComponent.
+ * @class
+ * @global
+ */
+export class PasswordField extends TextComponent
+{
+	/**
+	 * PasswordField constructor. Creates an instance of PasswordField UI component.
+	 *
+	 * @param {string} [value] - Text value.
+	 */
+	constructor(...args)
+	{
+		if(args.length > 0)
+		{
+			super(new.target.name, (new.target === PasswordField), args[0]);
+		}
+		else
+		{
+			super(new.target.name, (new.target === PasswordField));
+		}
+		
+		this.finalize(new.target, TextComponent);
+	}
+	
+	/**
+	 * Sets/Gets a Unicode character to use for masking real characters.
+	 *
+	 * Some disk characters to try:
+	 * const myChar = '\u00B7';
+	 * const myChar = '\u2022';
+	 * const myChar = '\u25CF';
+	 * const myChar = '\u2B24';
+	 *
+	 * @param {string} [character] - A one character string character. If the string has more than one character, only first one will be used.
+	 * @returns {PasswordField|string} Returns an instance of `this` object when setting a value, otherwise current value is returned.
+	 */
+	echoChar(...args)
+	{
+		return this.property("character", args);
+	}
+}

package/classes/Polygon.js

@@ -0,0 +1,236 @@
+import {Shape} from "./Shape.js";
+
+/**
+ * Polygon is a shape with multiple corners at specified points. Each point is an X and Y coordinate relative to the shapes X and Y position.
+ *
+ * Polygon extends {@link Shape} class.
+ *
+ * @class
+ * @global
+ * @see Shape
+ */
+export class Polygon extends Shape
+{
+	_points = [];
+
+	/**
+	 * Creates an instance of Polygon shape object.
+	 *
+	 * @param {Stroke} [stroke] - A border of the shape.
+	 * @param {string|null} [background] - Color, gradient, or image background, similar to CSS. Use an empty string to remove the background.
+	 * @param {number} [opacity] - Opacity of the shape (0 to 1).
+	 * @param {number} [x] - Horizontal position from the left edge.
+	 * @param {number} [y] - Vertical position from the top edge.
+	 * @param {Point[]} [_points=[]] - An array of `Point` objects that represent each corner of the shape [{x:number,y:number}, ...]. For example a simple start has 10 points.
+	 */
+	constructor(stroke = null, background = null, opacity = 1, x = 0, y = 0, _points = [])
+	{
+		super(undefined, stroke, background, opacity, x, y);
+		this._type = "polygon";
+
+		if(!Array.isArray(_points)) throw new TypeError(`Polygon.points() expects an Array of point objects, but ${typeof _points} was received.`);
+
+		// converts points to one array of numbers
+		this._points = new Array(_points.length * 2);
+		_points.forEach((p, i) =>
+		{
+			this._points[i*2] = Number.isFinite(p.x) ? p.x : 0;
+			this._points[i*2+1] = Number.isFinite(p.y) ? p.y : 0;
+		});
+	}
+
+	/**
+	 * Adds a point to the Polygon as a last point or at a specified index.
+	 *
+	 * @param {Point} point - A {@link Point} formatted object with X and Y coordinates (e.g., {x: 20, y:30});
+	 * @param {number} [insertAt=undefined] - If specified, the point will be added at this position; otherwise at the end.
+	 * @returns {Polygon} Returns this Polygon shape object for chaining.
+	 * @see Point
+	 * @example <h2>Adding a point to the end of the points array:</h2>
+	 * polygon.addPoint({x:20, y:30});
+	 *
+	 * @example <h2>Adding a point at a specified index:</h2>
+	 * polygon.addPoint({x:30, y:60}, 0); // adds a point the beginning of points array
+	 */
+	addPoint(point, insertAt = undefined)
+	{
+		if(typeof point !== "object" || !("x" in point && "y" in point)) throw new Error(`Point parameter must has "x" and "y" numeric properties.`);
+		if(insertAt !== undefined && !Number.isSafeInteger(insertAt)) throw new TypeError(`Polygon.addPoint() method requires 'insertAt' parameter be an integer parameter.`);
+
+		if(insertAt == null || typeof insertAt !== "number" || insertAt > this._points.length) // add point
+		{
+			this._points.push(point.x, point.y);
+		}
+		else // insert point
+		{
+			insertAt = Math.max(0, Math.min(this._points.length / 2, insertAt));
+			this._points.splice(insertAt * 2, 0, point.x, point.y);
+		}
+
+		if(this.parent != null)
+		{
+			const shapeIndex = this.parent.shapeIndex(this);
+
+			if(shapeIndex > -1) ui.sendToGUI({
+				control: this.parent.id,
+				set: "update_shape",
+				value: {index: shapeIndex, addPoint: point, insertAt: insertAt}
+			});
+		}
+
+		return this;
+	}
+
+	/**
+	 * Removes a point from the Polygon at a specified index.
+	 *
+	 * @param {number} index - Index of the point to return.
+	 * @returns {{x:number, y:number}|null} Returns the deleted point or `null` of there was no point at specified index.
+	 */
+	removePoint(index)
+	{
+		if(!Number.isSafeInteger(index)) throw new TypeError(`Polygon.removePoint(index) expects an integer index, but ${typeof index} was received.`);
+
+		let p = this.point(index);
+
+		if(p != null)
+		{
+			this._points.splice(index * 2, 2);
+
+			if(this.parent != null)
+			{
+				const shapeIndex = this.parent.shapeIndex(this);
+				if(shapeIndex > -1) ui.sendToGUI({
+					control: this.parent.id,
+					set: "update_shape",
+					value: {index: shapeIndex, removePoint: index}
+				});
+			}
+		}
+
+		return p;
+	}
+
+	/**
+	 * Sets or gets a point of the Polygon {x:number, y:number} at a specified index.
+	 *
+	 * @param {number} index - Index of the existing point to update.
+	 * @param {Point|number} [point_or_x=undefined] - New point object or X coordinate of the new point.
+	 * @param {number} [y=undefined] - Y coordinate of the new point.
+	 * @returns {Point|null|Polygon} When getting a point, returns a point object or `undefined` when a point at specified index doesn't exist. When setting the point, returns this Polygon or throws an Error.
+	 * @see Point
+	 * @example <h2>Updating a point at index 3:</h2>
+	 * polygon.point(3, 50, 80); // x = 50, y = 80
+	 *
+	 * // or...
+	 *
+	 * polygon.point(3, {x:50, y:80});
+	 *
+	 * @example <h2>Getting a point at index 3:</h2>
+	 * let p = polygon.point(3);
+	 */
+	point(index, point_or_x = undefined, y = undefined)
+	{
+		if(!Number.isSafeInteger(index)) throw new TypeError(`Polygon.point(index) expects an integer index, but ${typeof index} was received.`);
+
+		// gets a point
+		if(point_or_x === undefined)
+		{
+			if(this._points[index + 1] === undefined) return null;
+			return {x: this._points[index], y: this._points[index + 1]};
+		}
+
+		if(typeof point_or_x === "object")
+		{
+			if(!("x" in point_or_x && "y" in point_or_x)) throw new Error(`Invalid point object. It must have numeric "x" and "y" properties.`);
+		}
+		else if(typeof point_or_x === "number" && Number.isFinite(point_or_x) && typeof y === "number" && Number.isFinite(y))
+		{
+			point_or_x = {x: point_or_x, y: y};
+		}
+		else
+		{
+			throw new Error(`Invalid arguments passed to Polygon.point(index, [point_or_x], [y]).`);
+		}
+
+		this._points[index] = point_or_x.x;
+		this._points[index + 1] = point_or_x.y;
+
+		if(this.parent != null)
+		{
+			const shapeIndex = this.parent.shapeIndex(this);
+
+			if(shapeIndex > -1) ui.sendToGUI({
+				control: this.parent.id,
+				set: "update_shape",
+				value: {index: shapeIndex, setPoint: point_or_x, at: index}
+			});
+		}
+
+		return this;
+	}
+
+	/**
+	 * Sets an array of new points, or get an array of existing point.
+	 *
+	 * @param {Point[]} [points] - An array of new point objects [{x:number, y:number}, ...]. Omit to get current point.
+	 * @returns {Point[]|Polygon} When called without arguments, returns current points; otherwise returns this Polygon for method chaining.
+	 * @see Point
+	 * @example <h2>Getting existing points as an Array:</h2>
+	 * let _points = polygon.points(); // -> array of objects
+	 *
+	 * @example <h2>Setting a new array of points:</h2>
+	 * polygon.points({
+	 *     {x:10, y:10},
+	 *     {x:40, y:10},
+	 *     {x:60, y:60},
+	 *     {x:30, y:60},
+	 *     {x:10, y:10}
+	 * });
+	 */
+	points()
+	{
+		if(arguments.length === 0)
+		{
+			const _p = new Array(this._points.length / 2);
+
+			for(let i = 0; i < this._points.length; i += 2)
+			{
+				_p[i / 2] = {x: this._points[i], y: this._points[i + 1]};
+			}
+
+			return _p;
+		}
+
+		if(!Array.isArray(arguments[0])) throw new TypeError(`Polygon.points() expects an Array of point objects, but ${typeof arguments[0]} was received.`);
+
+		// converts points to one array of numbers
+		this._points = new Array(arguments[0].length * 2);
+		arguments[0].forEach((p, i) =>
+		{
+			this._points[i*2] = Number.isFinite(p.x) ? p.x : 0;
+			this._points[i*2+1] = Number.isFinite(p.y) ? p.y : 0;
+		});
+
+		this.update("points");
+		return this;
+	}
+
+	/**
+	 * Returns a JSON object that contains this shape properties. It may be converted back to this shape.
+	 *
+	 * @param {string} [include="all"] - Specified what to include. "all" is default. Valid values are: "all", "stroke", "background", "points", "basic".
+	 * @return {object} Returns an object containing this shape's properties.
+	 */
+	toObject(include = "all")
+	{
+		let shape = super.toObject(include);
+
+		if(this._type === "polygon")
+		{
+			if(include === "all" || include === "points") shape.points = this._points;
+		}
+
+		return shape;
+	}
+}

package/classes/Polyline.js

@@ -0,0 +1,240 @@
+
+import {Shape} from "./Shape.js";
+
+/**
+ * Polyline is a shape with multiple lines drawn from point to point for each provided point. Each point is an X and Y coordinate relative to the shapes X and Y position.
+ *
+ * Polyline is similar to {@link Polygon}, but the area within points is not filled in with background, and first and last points are not connected.
+ *
+ * Just like a {@link Line} shape, Polyline is a geometric line that doesn't have an area to be filled. For the line to be visible you specify the stroke size to be more that 0.
+ *
+ * Polyline extends {@link Shape} class.
+ *
+ * @class
+ * @global
+ * @see Shape
+ */
+export class Polyline extends Shape
+{
+	_points = [];
+
+	/**
+	 * Creates an instance of Polygon shape object.
+	 *
+	 * @param {Stroke} [stroke] - A border of the shape.
+	 * @param {number} [opacity] - Opacity of the shape (0 to 1).
+	 * @param {number} [x] - Horizontal position from the left edge.
+	 * @param {number} [y] - Vertical position from the top edge.
+	 * @param {Point[]} [_points=[]] - An array of Point objects {x:number,y:number} that represent each point where lines begin, connect and end: [{x:number,y:number}, ...].
+	 */
+	constructor(stroke = null, opacity = 1, x = 0, y = 0, _points = [])
+	{
+		super(undefined, stroke, null, opacity, x, y);
+		this._type = "polyline";
+
+		if(!Array.isArray(_points)) throw new TypeError(`Polygon.points() expects an Array of point objects, but ${typeof _points} was received.`);
+
+		// converts points to one array of numbers
+		this._points = new Array(_points.length * 2);
+		_points.forEach((p, i) =>
+		{
+			this._points[i*2] = Number.isFinite(p.x) ? p.x : 0;
+			this._points[i*2+1] = Number.isFinite(p.y) ? p.y : 0;
+		});
+	}
+
+	/**
+	 * Adds a point to the Polyline as a last point or at a specified index.
+	 *
+	 * @param {Point} point - A {@link Point} formatted object with X and Y coordinates (e.g., {x: 20, y:30});
+	 * @param {number} [insertAt=undefined] - If specified, the point will be added at this position; otherwise at the end.
+	 * @returns {Polyline} Returns this Polyline shape object for chaining.
+	 * @see Point
+	 * @example <h2>Adding a point to the end of the points array:</h2>
+	 * polyline.addPoint({x:20, y:30});
+	 *
+	 * @example <h2>Adding a point at a specified index:</h2>
+	 * polyline.addPoint({x:30, y:60}, 0); // adds a point the beginning of points array
+	 */
+	addPoint(point, insertAt = undefined)
+	{
+		if(typeof point !== "object" || !("x" in point && "y" in point)) throw new Error(`Point parameter must has "x" and "y" numeric properties.`);
+		if(insertAt !== undefined && !Number.isSafeInteger(insertAt)) throw new TypeError(`Polygon.addPoint() method requires 'insertAt' parameter be an integer parameter.`);
+
+		if(insertAt == null || typeof insertAt !== "number" || insertAt > this._points.length) // add point
+		{
+			this._points.push(point.x, point.y);
+		}
+		else // insert point
+		{
+			insertAt = Math.max(0, Math.min(this._points.length / 2, insertAt));
+			this._points.splice(insertAt * 2, 0, point.x, point.y);
+		}
+
+		if(this.parent != null)
+		{
+			const shapeIndex = this.parent.shapeIndex(this);
+
+			if(shapeIndex > -1) ui.sendToGUI({
+				control: this.parent.id,
+				set: "update_shape",
+				value: {index: shapeIndex, addPoint: point, insertAt: insertAt}
+			});
+		}
+
+		return this;
+	}
+
+	/**
+	 * Removes a point from the Polyline at a specified index.
+	 *
+	 * @param {number} index - Index of the point to return.
+	 * @returns {{x:number, y:number}|null} Returns the deleted point or `null` of there was no point at specified index.
+	 */
+	removePoint(index)
+	{
+		if(!Number.isSafeInteger(index)) throw new TypeError(`Polyline.removePoint(index) expects an integer index, but ${typeof index} was received.`);
+
+		let p = this.point(index);
+
+		if(p != null)
+		{
+			this._points.splice(index * 2, 2);
+
+			if(this.parent != null)
+			{
+				const shapeIndex = this.parent.shapeIndex(this);
+				if(shapeIndex > -1) ui.sendToGUI({
+					control: this.parent.id,
+					set: "update_shape",
+					value: {index: shapeIndex, removePoint: index}
+				});
+			}
+		}
+
+		return p;
+	}
+
+	/**
+	 * Sets or gets a point of the Polyline {x:number, y:number} at a specified index.
+	 *
+	 * @param {number} index - Index of the existing point to update.
+	 * @param {Point|number} point_or_x - New `Point` object or X coordinate of the new point.
+	 * @param {number} [y=undefined] - Y coordinate of the new point.
+	 * @returns {Point|null|Polyline} When getting a point, returns a point object or throws and Error. When setting the point, returns this Polyline or throws an Error.
+	 *
+	 * @example <h2>Updating a point at index 3:</h2>
+	 * polyline.point(3, 50, 80); // x = 50, y = 80
+	 *
+	 * // or...
+	 *
+	 * polyline.point(3, {x:50, y:80});
+	 *
+	 * @example <h2>Getting a point at index 3:</h2>
+	 * let p = polyline.point(3);
+	 */
+	point(index, point_or_x, y = undefined)
+	{
+		if(!Number.isSafeInteger(index)) throw new TypeError(`Polyline.point(index) expects an integer index, but ${typeof index} was received.`);
+
+		// gets a point
+		if(point_or_x === undefined)
+		{
+			if(this._points[index] === undefined) return null;
+			return {x: this._points[index], y: this._points[index + 1]};
+		}
+
+		if(typeof point_or_x === "object")
+		{
+			if(!("x" in point_or_x && "y" in point_or_x)) throw new Error(`Invalid point object. It must have numeric "x" and "y" properties.`);
+		}
+		else if(typeof point_or_x === "number" && Number.isFinite(point_or_x) && typeof y === "number" && Number.isFinite(y))
+		{
+			point_or_x = {x: point_or_x, y: y};
+		}
+		else
+		{
+			throw new Error(`Invalid arguments passed to Polyline.point(index, [point_or_x], [y]).`);
+		}
+
+		this._points[index] = point_or_x.x;
+		this._points[index + 1] = point_or_x.y;
+
+		if(this.parent != null)
+		{
+			const shapeIndex = this.parent.shapeIndex(this);
+
+			if(shapeIndex > -1) ui.sendToGUI({
+				control: this.parent.id,
+				set: "update_shape",
+				value: {index: shapeIndex, setPoint: point_or_x, at: index}
+			});
+		}
+
+		return this;
+	}
+
+	/**
+	 * Sets an array of new points, or get an array of existing point.
+	 *
+	 * @param {Point[]} [points] - An array of new point objects [{x:number, y:number}, ...]. Omit to get current point.
+	 * @returns {Point[]|Polyline} When called without arguments, returns current points; otherwise returns this Polyline for method chaining.
+	 * @see Point
+	 * @example <h2>Getting existing points as an Array:</h2>
+	 * let _points = polyline.points(); // -> array of objects
+	 *
+	 * @example <h2>Setting a new array of points:</h2>
+	 * polyline.points({
+	 *     {x:10, y:10},
+	 *     {x:40, y:10},
+	 *     {x:60, y:60},
+	 *     {x:30, y:60},
+	 *     {x:10, y:10}
+	 * });
+	 */
+	points()
+	{
+		if(arguments.length === 0)
+		{
+			const _p = new Array(this._points.length / 2);
+
+			for(let i = 0; i < this._points.length; i += 2)
+			{
+				_p[i / 2] = {x: this._points[i], y: this._points[i + 1]};
+			}
+
+			return _p;
+		}
+
+		if(!Array.isArray(arguments[0])) throw new TypeError(`Polyline.points() expects an Array of point objects, but ${typeof arguments[0]} was received.`);
+
+		// converts points to one array of numbers
+		this._points = new Array(arguments[0].length * 2);
+		arguments[0].forEach((p, i) =>
+		{
+			this._points[i*2] = Number.isFinite(p.x) ? p.x : 0;
+			this._points[i*2+1] = Number.isFinite(p.y) ? p.y : 0;
+		});
+
+		this.update("points");
+		return this;
+	}
+
+	/**
+	 * Returns a JSON object that contains this shape properties. It may be converted back to this shape.
+	 *
+	 * @param {string} [include="all"] - Specified what to include. "all" is default. Valid values are: "all", "stroke", "background", "points", "basic".
+	 * @return {object} Returns an object containing this shape's properties.
+	 */
+	toObject(include = "all")
+	{
+		let shape = super.toObject(include);
+
+		if(this._type === "polyline")
+		{
+			if(include === "all" || include === "points") shape.points = this._points;
+		}
+
+		return shape;
+	}
+}