Class pwlib.gui

The default PaintWeb interface.
Defined in: script.js.

Class Summary
Constructor Attributes	Constructor Name and Description
	pwlib.gui(app)

Field Summary
Field Attributes	Field Name and Description
<private>	canvasResizer Holds an instance of the guiResizer object attached to the Canvas.
	colorInputs Holds references to DOM elements associated to color configuration properties.
<private>	commands Holds references to DOM elements associated to PaintWeb commands.
	elems Holds references to DOM elements.
	floatingPanels Holds references to floating panels GUI components.
	inputs Holds references to input elements associated to the PaintWeb configuration properties.
	inputValues Holds references to DOM elements associated to configuration values.
	tabPanels Holds references to tab panel GUI components.
<private>	tools Holds references to DOM elements associated to each tool registered in the current PaintWeb application instance.
<private>	toolTabConfig Holds tab configuration information for most drawing tools.
<private>	viewportResizer Holds an instance of the guiResizer object attached to the viewport element.

Method Summary
Method Attributes	Method Name and Description
<private>	appInit(ev) The `appInit` event handler.
<private>	canvasResizeEnd(ev) The `guiResizeEnd` event handler for the Canvas resize operation.
<private>	canvasResizeStart() The `guiResizeStart` event handler for the Canvas resize operation.
<private>	canvasSizeChange(ev) The `canvasSizeChange` application event handler.
<private>	clipboardUpdate(ev) The `clipboardUpdate` application event handler.
	commandAbout() The "About" command.
<private>	commandClick(ev) The `click` event handler for the command DOM elements.
<private>	commandRegister(ev) The `commandRegister` application event handler.
<private>	commandUnregister(ev) The `commandUnregister` application event handler.
<private>	configChangeHandler(ev) The `configChange` application event handler.
<private>	configInputChange() The `change` event handler for input elements associated to PaintWeb configuration properties.
<private>	configToggleClick(ev) The `click` event handler for DOM elements associated to boolean configuration properties.
<private>	configValueClick(ev) The `click` event handler for DOM elements associated to PaintWeb configuration values.
<private>	destroy() The application destroy event handler.
	hide() Hide the graphical user interface.
<private>	historyUpdate(ev) The `historyUpdate` application event handler.
<private>	imageSizeChange(ev) The `imageSizeChange` application event handler.
<private>	imageZoom(ev) The `imageZoom` application event handler.
	init(markup) Initialize the PaintWeb interface.
<private>	initCanvas() Initialize the Canvas elements.
<private>	initConfigIcons(elem, cfgAttr) Initialize an HTML element associated to a configuration property, and all of its own sub-elements associated to configuration values.
<private>	initConfigInput(elem, cfgAttr) Initialize an input element associated to a configuration property.
<private>	initConfigToggle(elem, cfgAttr) Initialize an HTML element associated to a boolean configuration property.
<private>	initImageZoom() Initialize the image zoom input.
<private>	initImportDoc(markup) Import the DOM nodes from the interface DOM document.
<private>	initKeyboardShortcuts() Initialize the keyboard shortcuts.
	initParseMarkup() Parse the interface markup.
<private>	initSelectionTool() Initialize GUI elements associated to selection tool options and commands.
<private>	initTextTool() Initialize GUI elements associated to text tool options.
	item_mouseout() The `mouseout` event handler for all tools, commands and icons.
	item_mouseover() The `mouseover` event handler for all tools, commands and icons.
	resizeTo(width, height) Resize the PaintWeb graphical user interface.
<private>	selectionChange(ev) The `selectionChange` application event handler.
<private>	shadowAllow(ev) The `shadowAllow` application event handler.
	show() Show the graphical user interface.
	statusShow(msg, temporary) Show a message in the status bar.
<private>	toolActivate(ev) The `toolActivate` application event handler.
<private>	toolClick(ev) The `click` event handler for the tool DOM elements.
<private>	toolHandStateChange(ev) The state change event handler for the Hand tool.
<private>	toolRegister(ev) The `toolRegister` application event handler.
	toolUnregister(ev) The `toolUnregister` application event handler.
<private>	viewportResizeEnd(ev) The `guiResizeEnd` event handler for the viewport resize operation.
<private>	viewportResizeMouseMove(ev) The `guiResizeMouseMove` event handler for the viewport resize operation.

Class Detail

pwlib.gui(app)

Parameters:
{PaintWeb} app: Reference to the main paint application object.

Field Detail

<private> {pwlib.guiResizer} canvasResizer

Holds an instance of the guiResizer object attached to the Canvas.

{Object} colorInputs

Holds references to DOM elements associated to color configuration properties.

See:: pwlib.guiColorInput

<private> {Object} commands

Holds references to DOM elements associated to PaintWeb commands.

{Object} elems

Holds references to DOM elements.

{Object} floatingPanels

Holds references to floating panels GUI components.

See:: pwlib.guiFloatingPanel

{Object} inputs

Holds references to input elements associated to the PaintWeb configuration properties.

{Object} inputValues

Holds references to DOM elements associated to configuration values.

{Object} tabPanels

Holds references to tab panel GUI components.

See:: pwlib.guiTabPanel

<private> {Object} tools

Holds references to DOM elements associated to each tool registered in the current PaintWeb application instance.

<private> {Object} toolTabConfig

Holds tab configuration information for most drawing tools.

<private> {pwlib.guiResizer} viewportResizer

Holds an instance of the guiResizer object attached to the viewport element.

Method Detail

<private> appInit(ev)

The appInit event handler. This method is invoked once PaintWeb completes all the loading.

This method dispatches the pwlib.appEvent.guiShow application event.

Parameters:
{pwlib.appEvent.appInit} ev: The application event object.

<private> canvasResizeEnd(ev)

The guiResizeEnd event handler for the Canvas resize operation.

Parameters:
{pwlib.appEvent.guiResizeEnd} ev: The application event object.

<private> canvasResizeStart()

The guiResizeStart event handler for the Canvas resize operation.

<private> canvasSizeChange(ev)

The canvasSizeChange application event handler. The Canvas container element dimensions are updated to the new values, and the image resize handle is positioned accordingly.

Canvas size refers strictly to the dimensions of the Canvas elements in the browser, changed with CSS style properties, width and height. Scaling of the Canvas elements is applied when the user zooms the image or when the browser changes the render DPI / zoom.

Parameters:
{pwlib.appEvent.canvasSizeChange} ev: The application event object.

<private> clipboardUpdate(ev)

The clipboardUpdate application event handler. The GUI element associated to the clipboardPaste command is updated to be disabled/enabled depending on the event.

Parameters:
{pwlib.appEvent.clipboardUpdate} ev: The application event object.

commandAbout()

The "About" command. This method displays the "About" panel.

<private> commandClick(ev)

The click event handler for the command DOM elements.

Parameters:
{Event} ev: The DOM Event object.

See:: PaintWeb#commandRegister to register a new command.

<private> commandRegister(ev)

The commandRegister application event handler. GUI elements associated to commands are updated to ensure proper user interaction.

Parameters:
{pwlib.appEvent.commandRegister} ev: The application event object.

See:: PaintWeb#commandRegister the method which allows you to register new commands.

<private> commandUnregister(ev)

The commandUnregister application event handler. This method simply removes all the user interactivity from the GUI element associated to the command being unregistered.

Parameters:
{pwlib.appEvent.commandUnregister} ev: The application event object.

See:: PaintWeb#commandUnregister the method which allows you to unregister commands.

<private> configChangeHandler(ev)

The configChange application event handler. This method ensures the GUI input elements stay up-to-date when some PaintWeb configuration is modified.

Parameters:
{pwlib.appEvent.configChange} ev: The application event object.

<private> configInputChange()

The change event handler for input elements associated to PaintWeb configuration properties.

This method dispatches the pwlib.appEvent.configChange event.

<private> configToggleClick(ev)

The click event handler for DOM elements associated to boolean configuration properties. These elements only toggle the true/false value of the configuration property.

This method dispatches the pwlib.appEvent.configChange event.

Parameters:
{Event} ev: The DOM Event object.

<private> configValueClick(ev)

The click event handler for DOM elements associated to PaintWeb configuration values. These elements rely on parent elements which are associated to configuration properties.

This method dispatches the pwlib.appEvent.configChange event.

Parameters:
{Event} ev: The DOM Event object.

<private> destroy()

The application destroy event handler. This method is invoked by the main PaintWeb application when the instance is destroyed, for the purpose of cleaning-up the GUI-related things from the document add by the current instance.

hide()

Hide the graphical user interface.

This method dispatches the pwlib.appEvent.guiHide application event.

<private> historyUpdate(ev)

The historyUpdate application event handler. GUI elements associated to the historyUndo and to the historyRedo commands are updated such that they are either enabled or disabled, depending on the current history position.

Parameters:
{pwlib.appEvent.historyUpdate} ev: The application event object.

See:: PaintWeb#historyGoto the method which allows you to go to different history states.

<private> imageSizeChange(ev)

The imageSizeChange application event handler. The GUI element which displays the image dimensions is updated to display the new image size.

Image size refers strictly to the dimensions of the image being edited by the user, that's width and height.

Parameters:
{pwlib.appEvent.imageSizeChange} ev: The application event object.

<private> imageZoom(ev)

The imageZoom application event handler. The GUI input element which displays the image zoom level is updated to display the new value.

Parameters:
{pwlib.appEvent.imageZoom} ev: The application event object.

{Boolean} init(markup)

Initialize the PaintWeb interface.

Parameters:
{Document|String} markup: The interface markup loaded and parsed as DOM Document object. Optionally, the value can be a string holding the interface markup (this is used when PaintWeb is packaged).

Returns:: {Boolean} True if the initialization was successful, or false if not.

<private> {Boolean} initCanvas()

Initialize the Canvas elements.

Returns:: {Boolean} True if the initialization was successful, or false if not.

<private> initConfigIcons(elem, cfgAttr)

Initialize an HTML element associated to a configuration property, and all of its own sub-elements associated to configuration values. Each element that has the data-pwConfigValue attribute is considered an icon.

Parameters:
{Element} elem: The DOM element which is associated to the configuration property.
{String} cfgAttr: The configuration attribute. This tells the configuration group and property to which the DOM element is attached to.

<private> initConfigInput(elem, cfgAttr)

Initialize an input element associated to a configuration property.

Parameters:
{Element} elem: The DOM element which is associated to the configuration property.
{String} cfgAttr: The configuration attribute. This tells the configuration group and property to which the DOM element is attached to.

<private> initConfigToggle(elem, cfgAttr)

Initialize an HTML element associated to a boolean configuration property.

Parameters:
{Element} elem: The DOM element which is associated to the configuration property.
{String} cfgAttr: The configuration attribute. This tells the configuration group and property to which the DOM element is attached to.

<private> {Boolean} initImageZoom()

Initialize the image zoom input.

Returns:: {Boolean} True if the initialization was successful, or false if not.

<private> {Boolean} initImportDoc(markup)

Import the DOM nodes from the interface DOM document. All the nodes are inserted into the PaintWeb.config.guiPlaceholder element.

Elements which have the ID attribute will have the attribute renamed to data-pwId.

Input elements which have the ID attribute will have their attribute updated to be unique for the current PaintWeb instance.

Parameters:
{Document|String} markup: The source DOM document to import the nodes from. Optionally, this parameter can be a string which holds the interface markup.

Returns:: {Boolean} True if the initialization was successful, or false if not.

<private> {Boolean} initKeyboardShortcuts()

Initialize the keyboard shortcuts. Basically, this updates various strings to ensure the user interface is informational.

Returns:: {Boolean} True if the initialization was successful, or false if not.

{Boolean} initParseMarkup()

Parse the interface markup. The layout file can have custom PaintWeb-specific attributes.

Elements with the data-pwId attribute are added to the pwlib.gui#elems object.

Elements having the data-pwCommand attribute are added to the pwlib.gui#commands object.

Elements having the data-pwTool attribute are added to the pwlib.gui#tools object.

Elements having the data-pwTabPanel attribute are added to the pwlib.gui#tabPanels object. These become interactive GUI components (see pwlib.guiTabPanel).

Elements having the data-pwFloatingPanel attribute are added to the pwlib.gui#floatingPanels object. These become interactive GUI components (see pwlib.guiFloatingPanel).

Elements having the data-pwConfig attribute are added to the pwlib.gui#inputs object. These become interactive GUI components which allow users to change configuration options.

Elements having the data-pwConfigValue attribute are added to the pwlib.gui#inputValues object. These can only be child nodes of elements which have the data-pwConfig attribute. Each such element is considered an icon. Anchor elements are appended to ensure keyboard accessibility.

Elements having the data-pwConfigToggle attribute are added to the pwlib.gui#inputs object. These become interactive GUI components which toggle the boolean value of the configuration property they are associated to.

Elements having the data-pwColorInput attribute are added to the pwlib.gui#colorInputs object. These become color picker inputs which are associated to the configuration property given as the attribute value. (see pwlib.guiColorInput)

Returns:: {Boolean} True if the parsing was successful, or false if not.

<private> {Boolean} initSelectionTool()

Initialize GUI elements associated to selection tool options and commands.

Returns:: {Boolean} True if the initialization was successful, or false if not.

<private> {Boolean} initTextTool()

Initialize GUI elements associated to text tool options.

Returns:: {Boolean} True if the initialization was successful, or false if not.

item_mouseout()

The mouseout event handler for all tools, commands and icons. This method simply resets the GUI status bar to the previous message it was displaying before the user hovered the current element.

See:: pwlib.gui#statusShow The method used for displaying the message in the GUI status bar.

item_mouseover()

The mouseover event handler for all tools, commands and icons. This simply shows the title / text content of the element in the GUI status bar.

See:: pwlib.gui#statusShow The method used for displaying the message in the GUI status bar.

resizeTo(width, height)

Resize the PaintWeb graphical user interface.

This method dispatches the pwlib.appEvent.configChange event for the "viewportWidth" and "viewportHeight" configuration properties. Both properties are updated to hold the new values you give.

Once the GUI is resized, the pwlib.appEvent.viewportSizeChange event is also dispatched.

Parameters:
{String} width: The new width you want. Make sure the value is a CSS length, like "50%", "450px" or "30em".
{String} height: The new height you want.

<private> selectionChange(ev)

The selectionChange application event handler. The GUI elements associated to the selectionCut and selectionCopy commands are updated to be disabled/enabled depending on the event.

Parameters:
{pwlib.appEvent.selectionChange} ev: The application event object.

<private> shadowAllow(ev)

The shadowAllow application event handler. This method shows/hide the shadow tab when shadows are allowed/disallowed.

Parameters:
{pwlib.appEvent.shadowAllow} ev: The application event object.

show()

Show the graphical user interface.

This method dispatches the pwlib.appEvent.guiShow application event.

statusShow(msg, temporary)

Show a message in the status bar.

Parameters:
{String|Number} msg: The message ID you want to display. The ID should be available in the PaintWeb.lang.status object. If the value is -1 then the previous non-temporary message will be displayed. If the ID is not available in the language file, then the string is shown as-is.
{Boolean} temporary Optional, Default: false: Tells if the message is temporary or not.

<private> toolActivate(ev)

The toolActivate application event handler. This method provides visual feedback for the activation of a new drawing tool.

Parameters:
{pwlib.appEvent.toolActivate} ev: The application event object.

See:: PaintWeb#toolActivate the method which allows you to activate a drawing tool.

<private> toolClick(ev)

The click event handler for the tool DOM elements.

Parameters:
{Event} ev: The DOM Event object.

See:: PaintWeb#toolActivate to activate a drawing tool.

<private> toolHandStateChange(ev)

The state change event handler for the Hand tool. This function enables/disables the Hand tool by checking if the current image fits into the viewport or not.

This function is invoked when one of the following application events is dispatched: viewportSizeChange, canvasSizeChange or appInit

Parameters:
{pwlib.appEvent.viewportSizeChange|pwlib.appEvent.canvasSizeChange|pwlib.appEvent.appInit} ev Optional: The application event object.


						
						
						
						
						
						
						

					
				
					 
					<private> 
					
					
					toolRegister(ev)
					
					
					
						The toolRegister application event handler. This method adds 
the new tool into the GUI.
						
						
					
					
					
					
						
							
							Parameters:
							
								
									{pwlib.appEvent.toolRegister} ev
									
								
								The application event object.
							
							
						
						
						
						
						
						
						
							
							See:
							
								PaintWeb#toolRegister the method which allows you to register new 
tools.
							
							
						

					
				
					 
					
					
					
					toolUnregister(ev)
					
					
					
						The toolUnregister application event handler. This method the 
tool element from the GUI.
						
						
					
					
					
					
						
							
							Parameters:
							
								
									{pwlib.appEvent.toolUnregister} ev
									
								
								The application event object.
							
							
						
						
						
						
						
						
						
							
							See:
							
								PaintWeb#toolUnregister the method which allows you to unregister 
tools.
							
							
						

					
				
					 
					<private> 
					
					
					viewportResizeEnd(ev)
					
					
					
						The guiResizeEnd event handler for the viewport resize 
operation.
						
						
					
					
					
					
						
							
							Parameters:
							
								
									{pwlib.appEvent.guiResizeEnd} ev
									
								
								The application event object.
							
							
						
						
						
						
						
						
						

					
				
					 
					<private> 
					
					
					viewportResizeMouseMove(ev)
					
					
					
						The guiResizeMouseMove event handler for the viewport resize 
operation.
						
						
					
					
					
					
						
							
							Parameters:
							
								
									{pwlib.appEvent.guiResizeMouseMove} ev
									
								
								The application event object.



		

		
			
			Documentation generated by JsDoc Toolkit 2.3.0 on Sat Jun 26 2010 21:57:02 GMT+0300 (EEST)

Classes

Class pwlib.gui