import Sketchpad from 'formiojs/src/components/sketchpad/Sketchpad.js'

public class | source

Sketchpad

Extends:

src/Element.js~Element → Component → Field → Sketchpad

Static Member Summary

Static Public Members
public static	builderInfo: *
public static	editForm: *

Static Method Summary

Static Public Methods
public static	schema(extend: ...):

Constructor Summary

Public Constructor
public	constructor()

Member Summary

Public Members
public get	actions: undefined[]
public	backgroundReady: {"resolve": , "reject": }
public	center: *
public	curve: *
public get	dataReady: *
public	dataValue: *
public	deleted: *[]
public	dimensions: {"width": , "height": }
public	dimensionsMultiplier: number
public	disabled: boolean
public	dragEndPoint: *
public	dragLastPoint: *
public	dragStartPoint: *
public	editSketchpad: {"canvas": , "background": }
public	editValue: *
public	editorModal: *
public	editorModalContent: *
public	editorModalFooter: *
public	editorModalHeader: *
public get	emptyValue: *[]
public	height: *
public	layers: *[]
public	line: *
public get	modes: {"pencil": , "line": , "circle": , "rectangle": , "zoomIn": , "zoomOut": , "drag": *}
public	points: undefined[]
public	prev: *
public	rectangle: *
public	saveSvgButton: *
public	state: {"mode": *, "stroke": string, "fill": string, "linewidth": number, "circleSize": number}
public get	styles: undefined[]
public	useBackgroundDimensions: *
public	viewSketchpad: {"canvas": , "background": }
public	width: *
public	zoomInfo: {"viewBox": *, "multiplier": number, "totalMultiplier": number}

Method Summary

Public Methods
public	addBackground()
public	attach(element: ):
public	attachOld(element: *)
public	clear()
public	clearAll()
public	click(event: , index: )
public	copySvgToView()
public	createToolbar(): *
public	dragImage(offset: *)
public	draw(value: *)
public	editSvg()
public	getActualCoordinate(coordinate: ):
public	getValue(): *
public	normalizeSvgOffset()
public	redo()
public	render(): * Builds the component.
public	resetZoom()
public	saveSvg()
public	setActiveButton(mode: *)
public	setBackgroundImage(svgMarkup: *)
public	setEditorSize(width: , height: )
public	setState(state: *)
public	setTotalMultiplier(multiplier: *)
public	setValue(value: *)
public	stretchDrawingArea()
public	undo()
public	updateSvgViewBox()
public	zoom(coordinate: , multiplier: )

Inherited Summary

From class Component
public static	schema(sources: ...):
public static	tableView(value: , options: ) Provides a table view for this component.
public get	allowData: *
public get	builderMode: *
public get	canDisable: *
public get	className: string: * Retrieves the CSS class name of this component.
public get	currentForm: *
public set	currentForm
public get	customStyle: string: * Build the custom style from the layout values
public get	dataReady: *
public get	dataValue: : Get the static value of this component.
public set	dataValue(value: *) Sets the static value of this component.
public get	defaultSchema: *
public get	defaultValue: *
public get	defaultViewOnlyValue: string
public get	disabled: boolean: * Return if the component is disabled.
public set	disabled(disabled: boolean) Disable this component.
public get	emptyValue: null: * The empty value for this component.
public get	errorLabel: : Returns the error label for this component.
public get	errors: *
public get	fullMode: *
public get	hasInput: *
public get	hasSetValue: *
public get	isInputComponent: *
public get	key: *
public get	label: * Get this component's label text.
public set	label(value: *) Set this component's label text and render it.
public get	labelInfo: *
public get	logic: *
public get	name: string: * The readible name for this component.
public get	parentDisabled: *
public set	parentDisabled
public get	parentVisible: *
public set	parentVisible
public get	ready: *
public get	rootPristine: *
public get	rootValue: : Get the data value at the root level.
public get	schema: * Returns the JSON schema for this component.
public get	shouldDisabled: *
public get	submissionTimezone: : Return the submission timezone.
public get	transform: *
public get	validationValue: *
public get	viewOnly: *
public get	visible: boolean: *
public set	visible(value: *)
public get	wysiwygDefault: {"theme": string, "placeholder": , "modules": }
public	attached: boolean If the component has been attached
public	calculatedValue: *
public	component: * The Form.io component JSON schema.
public	data: * The data object in which this component resides.
public	element: *
public	error: string The existing error that this component has.
public	id: *
public	info: * The element information for creating the input element.
public	invalid: boolean
public	isBuilt: boolean
public	originalComponent: *
public	parent: Component Points to the parent component.
public	pristine: boolean If this input has been input and provided value.
public	quill: *
public	refreshOnChanged: *
public	refreshOnValue: *
public	refs: {} References to dom elements
public	rendered: boolean If the component has been rendered
public	root: Component Points to the root component, usually the FormComponent.
public	row: number The row path of this component.
public	tooltip: string Tool tip text after processing
public	tooltips: Array list of attached tooltips
public	triggerChange: *
public	triggerRedraw: Function Used to trigger a redraw event within this component.
public	type: *
public	validators: [string] The validators that are assigned to this component.
private	_currentForm: *
private	_disabled: boolean Determines if this component is disabled, or not.
private	_hasCondition: null Determines if this component has a condition assigned to it.
private	_parentDisabled: boolean
private	_parentVisible: *
private	_visible: * Determines if this component is visible, or not.
public	addAce(element: , settings: , onChange: ):
public	addCKE(element: , settings: , onChange: ):
public	addClass(element: , className: ): *
public	addInputError(message: , dirty: ) Add a new input error to this element.
public	addInputWarning(message: , dirty: , elements: *)
public	addQuill(element: , settings: , onChange: ):
public	addShortcut(element: , shortcut: )
public	append(element: *)
public	applyActions(actions: , result: , data: , newComponent: ): *
public	asString(value: ): Prints out the value of this component as a string value.
public	attach(element: ):
public	attachLogic()
public	attachRefreshEvent(refreshData: *)
public	attachRefreshOn()
public	autofocus()
public	beforeNext(): *
public	beforePage(): * Called before a next and previous page is triggered allowing the components to perform special functions.
public	beforeSubmit(): * Called before a submission is triggered allowing the components to perform special async functions.
public	build(element: ):
public	calculateComponentValue(data: *): boolean Perform a calculated value operation.
public	calculateValue(args: *): boolean Performs calculations in this component plus any child components.
public	checkComponentConditions(data: ): Check for conditionals and hide/show the element based on those conditions.
public	checkComponentValidity(data: , dirty: , rowData: *): boolean Checks the validity of this component and sets the error message if it is invalid.
public	checkCondition(row: , data: ): boolean Checks the condition of this component.
public	checkConditions(args: *): boolean Checks conditions for this component and any sub components.
public	checkData(data: , flags: ): * Check the conditions, calculations, and validity of a single component and triggers an update if something changed.
public	checkTemplate(templates: , names: , modes: ):
public	checkTemplateMode(templatesByName: , modes: ): *
public	checkValidity(args: ...):
public	clear()
public	clearErrorClasses()
public	clearOnHide()
public	conditionallyVisible(data: *): boolean Check if this component is conditionally visible.
public	createModal(element: ):
public	createViewOnlyElement(): *
public	deleteValue() Deletes the value of the component.
public	destroy()
public	detach() Remove all event handlers.
public	elementInfo(): {"type": string, "component": , "changeEvent": string, "attr": } Get the element information.
public	errorMessage(type: ): Get the error message provided a certain type of error.
public	evalContext(additional: ): Create an evaluation context for all script executions and interpolations.
public	fieldLogic(data: ): Check all triggers and apply necessary actions.
public	focus()
public	getBrowserLanguage(): *
public	getElement(): HTMLElement Returns the outside wrapping element of this component.
public	getIcon(name: , content: , styles: , ref: string):
public	getModifiedSchema(schema: , defaultSchema: ): * Returns only the schema that is different from the default.
public	getRoot(): * Get FormioForm element at the root of this component tree.
public	getTemplate(names: , modes: ): *
public	getValue(): * Get the input value of this component.
public	getValueAsString(value: ):
public	getValueAt(index: ): Get the value at a specific index.
public	getView(value: ):
public	hasChanged(newValue: , oldValue: ): boolean Determine if the value of this component has changed.
public	hasClass(element: , className: ): *
public	hasCondition(): null Determines if this component has a condition defined.
public	hasValue(data: ): Returns if this component has a value set.
public	iconClass(name: , spinning: ): *
public	inContext(component: *): boolean Checks to see if a separate component is in the "context" of this component.
public	init()
public	invalidMessage(data: , dirty: ): * Returns the invalid message, or empty string if the component is valid.
public	isEmpty(value: ):
public	isEqual(valueA: , valueB: ): *
public	isValid(data: , dirty: ): boolean Returns if the component is valid or not.
public	labelIsHidden(): *
public	loadRefs(element: , refs: )
public	normalizeValue(value: ): Normalize values coming into updateValue.
public	onChange(flags: , fromRoot: ): *
public	performInputMapping(input: ):
public	prepend(element: *)
public	rebuild(): *
public	redraw(): *
public	refresh(value: *) Refreshes the component with a new value.
public	removeChild(element: *)
public	removeClass(element: , className: ): *
public	removeEventListeners()
public	removeShortcut(element: , shortcut: )
public	removeValue(index: number) Removes a value out of the data array and rebuild the rows.
public	render(children: undefined, topLevel: boolean): *
public	renderString(template: , data: , actions: *): HTMLElement Render a template string into html.
public	renderTemplate(name: , data: {}, modeOption: ): *
public	resetValue() Resets the value of this component.
public	restoreValue() Restore the value of a control.
public	sanitize(string: ): Sanitize an html string.
public	selectOptions(select: , tag: , options: , defaultValue: )
public	setContent(element: , content: ): boolean
public	setCustomValidity(message: , dirty: , external: *, isWarning: boolean)
public	setDisabled(element: , disabled: )
public	setLoading(element: , loading: )
public	setPristine(pristine: *) Sets the pristine flag for this component.
public	setSelectValue(select: , value: )
public	setValue(value: , flags: ): boolean Set the value of this component.
public	setValueAt(index: , value: ) Set the value at a specific index.
public	shouldSkipValidation(data: , dirty: , rowData: ):
public	splice(index: *) Splice a value from the dataValue.
public	t(text: string, params: Object): * Translate a text using the i18n system.
public	updateComponentValue(flags: ): Update a value of this component.
public	updateItems(args: ...*)
public	updateOnChange(flags: , changed: ): boolean Update the value on change.
public	updateValue(args: *): boolean Updates the value of this component plus all sub-components.
public	validateMultiple(value: *): boolean Check if a component is eligible for multiple validation
public	whenReady(): *

From class Field
public	render(element: ):

Static Public Members

public static builderInfo: * source

public static editForm: * source

Static Public Methods

public static schema(extend: ...): source

Override:

Component#schema

Params:

Name	Type	Attribute	Description
extend	...*

Return:

Public Constructors

public constructor() source

Initialize a new Component.

Override:

Component#constructor

Public Members

public get actions: undefined[] source

public backgroundReady: {"resolve": , "reject": } source

public center: * source

public curve: * source

public get dataReady: * source

Override:

Component#dataReady

public dataValue: * source

Get the static value of this component.

Override:

Component#dataValue

public deleted: *[] source

public dimensions: {"width": , "height": } source

public dimensionsMultiplier: number source

public disabled: boolean source

Return if the component is disabled.

Override:

Component#disabled

public dragEndPoint: * source

public dragLastPoint: * source

public dragStartPoint: * source

public editSketchpad: {"canvas": , "background": } source

public editValue: * source

public editorModal: * source

public editorModalContent: * source

public editorModalFooter: * source

public editorModalHeader: * source

public get emptyValue: *[] source

The empty value for this component.

Override:

Component#emptyValue

public height: * source

public layers: *[] source

public line: * source

public get modes: {"pencil": , "line": , "circle": , "rectangle": , "zoomIn": , "zoomOut": , "drag": *} source

public points: undefined[] source

public prev: * source

public rectangle: * source

public saveSvgButton: * source

public state: {"mode": *, "stroke": string, "fill": string, "linewidth": number, "circleSize": number} source

public get styles: undefined[] source

public useBackgroundDimensions: * source

public viewSketchpad: {"canvas": , "background": } source

public width: * source

public zoomInfo: {"viewBox": *, "multiplier": number, "totalMultiplier": number} source

Public Methods

public addBackground() source

public attach(element: ): source

Override:

Component#attach

Params:

Name	Type	Attribute	Description
element	*

Return:

public attachOld(element: *) source

Params:

Name	Type	Attribute	Description
element	*

public clear() source

Override:

Component#clear

public clearAll() source

public click(event: , index: ) source

Params:

Name	Type	Attribute	Description
event	*
index	*

public copySvgToView() source

public createToolbar(): * source

Return:

public dragImage(offset: *) source

Params:

Name	Type	Attribute	Description
offset	*

public draw(value: *) source

Params:

Name	Type	Attribute	Description
value	*

public editSvg() source

public getActualCoordinate(coordinate: ): source

Params:

Name	Type	Attribute	Description
coordinate	*

Return:

public getValue(): * source

Get the input value of this component.

Override:

Component#getValue

Return:

public normalizeSvgOffset() source

public redo() source

public render(): * source

Builds the component.

Override:

Field#render

Return:

public resetZoom() source

public saveSvg() source

public setActiveButton(mode: *) source

Params:

Name	Type	Attribute	Description
mode	*

public setBackgroundImage(svgMarkup: *) source

Params:

Name	Type	Attribute	Description
svgMarkup	*

public setEditorSize(width: , height: ) source

Params:

Name	Type	Attribute	Description
width	*
height	*

public setState(state: *) source

Params:

Name	Type	Attribute	Description
state	*

public setTotalMultiplier(multiplier: *) source

Params:

Name	Type	Attribute	Description
multiplier	*

public setValue(value: *) source

Set the value of this component.

Override:

Component#setValue

Params:

Name	Type	Attribute	Description
value	*

public stretchDrawingArea() source

public undo() source

public updateSvgViewBox() source

public zoom(coordinate: , multiplier: ) source

Params:

Name	Type	Attribute	Description
coordinate	*
multiplier	*

Sketchpad

Extends:

Static Member Summary

Static Method Summary

Constructor Summary

Member Summary

Method Summary

Inherited Summary

Static Public Members

public static builderInfo: * source

public static editForm: * source

Static Public Methods

public static schema(extend: ...*): * source

Override:

Params:

Return:

Public Constructors

public constructor() source

Override:

Public Members

public get actions: undefined[] source

public backgroundReady: {"resolve": *, "reject": *} source

public center: * source

public curve: * source

public get dataReady: * source

Override:

public dataValue: * source

Override:

public deleted: *[] source

public dimensions: {"width": *, "height": *} source

public dimensionsMultiplier: number source

public disabled: boolean source

Override:

public dragEndPoint: * source

public dragLastPoint: * source

public dragStartPoint: * source

public editSketchpad: {"canvas": *, "background": *} source

public editValue: * source

public editorModal: * source

public editorModalContent: * source

public editorModalFooter: * source

public editorModalHeader: * source

public get emptyValue: *[] source

Override:

public height: * source

public layers: *[] source

public line: * source

public get modes: {"pencil": *, "line": *, "circle": *, "rectangle": *, "zoomIn": *, "zoomOut": *, "drag": *} source

public points: undefined[] source

public prev: * source

public rectangle: * source

public saveSvgButton: * source

public state: {"mode": *, "stroke": string, "fill": string, "linewidth": number, "circleSize": number} source

public get styles: undefined[] source

public useBackgroundDimensions: * source

public viewSketchpad: {"canvas": *, "background": *} source

public width: * source

public zoomInfo: {"viewBox": *, "multiplier": number, "totalMultiplier": number} source

Public Methods

public addBackground() source

public attach(element: *): * source

Override:

Params:

Return:

public attachOld(element: *) source

Params:

public clear() source

Override:

public clearAll() source

public click(event: *, index: *) source

Params:

public copySvgToView() source

public createToolbar(): * source

Return:

public dragImage(offset: *) source

Params:

public draw(value: *) source

Params:

public editSvg() source

public getActualCoordinate(coordinate: *): * source

public static schema(extend: ...): source

public backgroundReady: {"resolve": , "reject": } source

public dimensions: {"width": , "height": } source

public editSketchpad: {"canvas": , "background": } source

public get modes: {"pencil": , "line": , "circle": , "rectangle": , "zoomIn": , "zoomOut": , "drag": *} source

public viewSketchpad: {"canvas": , "background": } source

public attach(element: ): source

public click(event: , index: ) source

public getActualCoordinate(coordinate: ): source

public setEditorSize(width: , height: ) source

public zoom(coordinate: , multiplier: ) source