A5Ink Class
Arguments
- containerIdstring
The ID of the element the ink control should be rendered in.
- settingsobject
Settings for the ink control. This will override the initial values of the properties of the A5.Ink class.
Description
Ink control.
- Name
- Description
- A5.Ink.Background Settings Object
Definition of the ink page background.
- A5.Ink.Lines Graph Settings Object
Definition of the ink page graph lines.
- A5.Ink.Lines Ruled Settings Object
Definition of the ink page ruled lines.
- A5.Ink.Page Settings Object
Definition of the ink page.
Properties
- themestring
The theme to use on the ink control.
- overridestring
The overrides to use on the ink control.
- inputIdstring
The ID of an input that the ink value should be put in on commit.
- autoCommitboolean
Whether to auto commit or not. The default value is "false". If the amount of ink the user will be drawing is little, then autoCommit can be set tot "true". Otherwise it should not be set, as a commit will happen each time the user draws a stroke. If autoCommit is "false", then you will have to use the A5.Ink.commit method to commit the ink.
- layoutstring
The layout to use. The values can be "split" for a split layout, "view" to see just the view part, "editor" to see just the editor, or "detached-view" to show the view in another container. See A5.Ink.view.detached.id to set the view containers ID.
- previewSizenumber
The max size in pixels of the preview to render when the ink is being dynamically navigated, such as by a pan or pinch zoom. The higher the number the sharper the preview, but the longer it will take to render.
- pageobject
The base page settings. See A5.Ink Page Settings Object.
- viewobject
Settings for the view part.
- detachedobject
Settings for the view part when it is detached.
- idstring
The ID of the element to put the view in when the layout is "detached-view". Note: if using a detached view, you cannot use other layouts.
- scaleobjectboolean
Automatic scaling of the view part. Either set to "false" to do no auto scaling, or an object with scaling information.
- fitstring
How to fit the ink into the view. Values are "both", "width" or "height"
- marginnumber
The number of pixels to add as a margin to each side.
- lockboolean
Whether to lock the scaling so that the user cannot change it manually.
- classNamestring
The class name to put on the view part.
- zoomBoxobject
Settings for the zoom box (the area that shows what the editors view is).
- classNamestring
The class name to put on the zoom box.
- navigateClassNamestring
The class name to put on the zoom box when navigation is occuring, such as pinch zoom.
- scaleobject
Settings for the zoom box scale. Scaling the zoom box will change the scale of the editor part.
- allowboolean
Whether to allow the zoom box to be scaled.
- classNamestring
The class name to put on the zoom box when scaling is allowed.
- pageobject
Settings for the view part ink page.
- classNamestring
The class name to put on the page.
- offsetnumber
The number of pixels offset to include for view part ink page. This can be used to compensate for a border on the page.
- overlayobject
Settings for the view part overlay.
- showboolean
Whether to show the overlay.
- htmlstring
The HTML to put in the overlay. Elements in the HTML can have an "a5-item" attribute put on them to be attached to named items in A5.Ink.items object. Values of "{id}" in the HTML will be replaced with the container ID of the A5.Ink class instance, allowing easy creation of unique IDs.
- editorobject
Settings for the editor part.
- scaleobjectboolean
Automatic scaling of the editor part. Either set to "false" to do no auto scaling, or an object with scaling information.
- fitstring
How to fit the ink into the editor. Values are "both", "width" or "height"
- marginnumber
The number of pixels to add as a margin to each side.
- lockboolean
Whether to lock the scaling so that the user cannot change it manually.
- classNamestring
The class name to put on the editor part.
- pageobject
Settings for the editor part ink page.
- classNamestring
The class name to put on the page.
- offsetnumber
The number of pixels offset to include for editor part ink page. This can be used to compensate for a border on the page.
- overlayobject
Settings for the editor part overlay.
- showboolean
Whether to show the overlay.
- htmlstring
The HTML to put in the overlay. Elements in the HTML can have an "a5-item" attribute put on them to be attached to named items in A5.Ink.items object. Values of "{id}" in the HTML will be replaced with the container ID of the A5.Ink class instance, allowing easy creation of unique IDs.
- splitobject
Settings for the split layout.
- layoutstring
The split layout to use. The values can be "v-view-editor" for vertical view over editor, "v-editor-view" for vertical editor over view, "h-view-editor" for horizontal view over editor, or "h-editor-view" for horizontal editor over view.
- sizestring
The size of the editor in the split layout. Values can be in CSS units such as "px", "pt" or "in".
- minSizestring
The minimum size of the view in the split layout. Values can be in CSS units such as "px", "pt" or "in".
- barobject
The Settings for the split bar, a line to draw between the editor and the view when in split mode.
- showboolean
Whether to show the split bar.
- sizestring
The size of the split bar. Values can be in CSS units such as "px", "pt" or "in".
- classNamestring
The class name to put on the split bar.
- verticalClassNamestring
The class name to put on the split bar when the split is vertical.
- horizontalClassNamestring
The class name to put on the split bar when the split is horizontal.
- itemsobject
Object containing named items that can be put into the view or editor overlays using the "a5-item" attribute.
- itemobject
A named item. You can have an arbitrary number of these items with any name you want, such as "pan" or "setPen".
- onClickfunction(element,argument,part)
The function to call when the user clicks on this item. Note: the scope of this function is the A5.Ink class instance.
- elementobject
The element that was clicked on.
- argumentstring
Extra argument on the "a5-item" attribute. Argument is the string after the first ":" in the value of "a5-item"
- partstring
Which part the click happened in. The value is either "view" or "editor".
- toolsobject
Settings for tools.
- penobject
Settings for the pen tool.
- activeClassNamestring
The class name to put on the editor part when the pen tool is active.
- smoothnumber
The amount the pen tool should be smoothed. The default value is "2". A higher value will result in fewer ink points being drawn.
- memoryobject
Settings for how pens should be remembered.
- loadstring
What to do with the pen when ink is loaded. The default value is "current" to not change the pen. Other values are "last" to use the pen last used in the ink being loaded, or "base" to restore to the base pen defined in A5.Ink.tools.pen.base.
- clearstring
What to do with the pen when ink is cleared. The default value is "current" to not change the pen. The other value is "base" to restore to the base pen defined in A5.Ink.tools.pen.base.
- baseobject
Settings for the base pen.
- colorstring
The color in CSS format for the pen.
- widthnumber
The width of the pen.
- lineCapstring
The line cap for the pen. Values are "round", "square" or "butt".
- previewobject
Settings for the optional pen preview, which will be drawn in the element with an ID of the container ID of the A5.Ink class instance plus ".PENPREVIEW".
- sizenumber
The size of the preview in pixels. The default is "38".
- widthobject
Pen width display settings.
- showstring
When to show the width of the pen as a number in the preview. Values are "never" to never show it, or "auto" to show it when the width is not easily noticable because the width is greater then the preview size.
- clipobject
Pen preview clipping settings.
- shapestring
The shape to clip the preview. The values are "circle" or "none".
- eraserobject
Settings for the eraser tool.
- activeClassNamestring
The class name to put on the editor part when the eraser tool is active.
- areaClassNamestring
The class name to put on the eraser area.
- sizenumber
The size of the eraser in pixels. The default is "50".
- maxnumber
The maximum size of the eraser in pixels. The default is "400".
- minnumber
The minimum size of the eraser in pixels. The default is "20".
- panobject
Settings for the pan tool.
- activeClassNamestring
The class name to put on the editor part when the pan tool is active.
- statusobject
Settings for status updates. Status messaged will be drawn in the element with an ID of the container ID of the A5.Ink class instance plus ".STATUS".
- messagesobject
Messages.
- 'tool:pen'string
The message to show when the pen tool is active. The default is "".
- 'tool:eraser'string
The message to show when the eraser tool is active. The default is "Eraser".
- 'tool:pan'string
The message to show when the pan tool is active. The default is "Drag to pan".
- 'item:eraser'string
The message to show when the user is pressing on an "a5-item" with the value of "*eraser". The default is "Drag to size eraser".
- 'item:undo'string
The message to show when the user is pressing on an "a5-item" with the value of "*undo". The default is "Drag to navigate undo stack".
- 'item:redo'string
The message to show when the user is pressing on an "a5-item" with the value of "*redo". The default is "Drag to navigate undo stack".
- 'item:navigate'string
The message to show when the user is pressing on an "a5-item" with the value of "*navigate". The default is "Drag to pan".
- 'item:navigate:new-line'string
The message to show when the user is pressing on an "a5-item" with the value of "*navigate" and teh argument is "new-line". The default is "Drag to move between lines".
- onChangefunction(data)
Event fired when the ink changes.
- dataobject
The event data.
- typestring
The change event type, can be "setValue", "clear", "undo", "redo", or "edit".
- onBeforeCommitfunction()
Event fired before the ink is committed.
- onCommitfunction(value)
Event fired after the ink is committed.
- valuestring
The value of the ink in string format.
- onToolChangefunction(tool,previousTool)
Event fired when the tool is changed.
- toolstring
The name of the current tool.
- previousToolstring
The name of the previous tool.
- onPenChangefunction(pen)
Event fired when the pen is changed.
- penobject
The pen object.
- colorstring
The color in CSS format for the pen.
- widthnumber
The width of the pen.
- lineCapstring
The line cap for the pen. Values are "round", "square" or "butt".
- onBackgroundChangefunction(background)
Event fired when the background is changed.
- backgroundobject
The page background object.
- onLayoutfunction()
Event fired when the ink controls layout changes.
- stateobject
The state of the ink.
- activestring
The active part.
- undoboolean
Can undo.
- redoboolean
Can redo.
- toolobject
The current tool.
- typestring
The name of the tool type. Such as "pen" or "eraser".
- stickyboolean
Whether the tool is "sticky", meaning that it will stay active after user interaction.
- settingsobject
The current tool settings.
- penobject
The current pen.
- colorstring
The color in CSS format for the pen.
- widthnumber
The width of the pen.
- lineCapstring
The line cap for the pen. Values are "round", "square" or "butt".
- viewobject
The view part state.
- shownboolean
Whether the view part is shown.
- autoScaleboolean
Whether the view part is auto scaled.
- detachedboolean
Whether the view part is detached.
- widthnumber
The width of the view part.
- heightnumber
The height of the view part.
- offsetnumber
The offset of the view part.
- xnumber
The x location of the view part.
- ynumber
The y location of the view part.
- scalenumber
The scale of the view part.
- editorobject
The editor part state.
- shownboolean
Whether the editor part is shown.
- autoScaleboolean
Whether the editor part is auto scaled.
- widthnumber
The width of the editor part.
- heightnumber
The height of the editor part.
- offsetnumber
The offset of the editor part.
- xnumber
The x location of the editor part.
- ynumber
The y location of the editor part.
- scalenumber
The scale of the editor part.
Methods
- clear Method
Clear all strokes from the ink. This will also clear the undo stack.
- commit Method
Commit ink edits to the value of the ink control. If A5.Ink.autoCommit is "false", then the ink must be manually committed using this method. This would usually be done at teh same time that the ink control is hidden in the UI after the user is done editing ink.
- destroy Method
Destroy the ink control.
- metaData Method
Set or get the meta data for the ink.
- navigate Method
Set the overlay HTML for the "editor" or "view" part.
- redo Method
Redo ink edits.
- refresh Method
Refresh the ink control. This is useful for causing a relayout and repaint.
- setBackground Method
Change the ink page background. This can be done through A5.Ink.setPage as well, but A5.Ink.setBackground allows for specific targeting of the background.
- setOverlay Method
Set the overlay HTML for the "editor" or "view" part.
- setPage Method
Change the ink page.
- setPen Method
Set the current pen.
- setStatus Method
Set the status message.
- setTool Method
Set the current tool in the ink control.
- setValue Method
Load ink into the control.
- undo Method
Undo ink edits.