Gets or sets whether this view will display a floating control near the caret that shows what the effect of expanding an abbreviation would be. The default is true.
Gets this view's abbreviation map.
The keys in this map are abbreviations: strings of characters that can be expanded to convert them into math objects or other actions. Abbreviations are used by typing them into the editor and then using the expand abbreviation command, which is bound to the space key by default. Abbreviations can consist of letters (which match scalar variables), digits, and operator symbols (which match simple operators using that symbol). They may not begin with digits. Abbreviations that contain operator symbols are matched more strictly than other types.
Abbreviation maps contain the following types of abbreviations:
a to z and is matched case-insensitively against the text to be expanded. Unlike other abbreviation types, a fragment can match multiple commands. Fragments are useful for assigning aliases to existing commands. Fragments are marked by prefixing the abbreviation string with a # (this is not considered part of the abbreviation).* following the prefix that they match. For example, the unit mapper u* is applied to abbreviations starting with the letter u to create unit objects. At this time, they can be removed from, but not added to, the map (except by adding the default mappings).. followed by a string that describes the mapper's purpose. At this time, they can be removed from, but not added to, the map (except by adding the default mappings).Gets or sets whether this view is disabled. A disabled view is non-interactive. It ignores keyboard, mouse, and touch input and is rendered in a different style. This does not prevent document content from being modified (see Editor.readOnly).
The editor controlled by this view.
Gets or sets this view's relative font size. This is a scaling factor relative to the default font size for the view. The initial value is 1. Setting this to a value greater than 1 will increase the size, while setting this to a positive value less than 1 will decrease the size. The base font size for new views is determined by the ThemeOptions. By default, this size is ultimately derived from the default font size set by the user in their browser options.
Gets this view's key binding map.
The keys in this map are strings that describe keyboard gestures. They can consist of either a single printable character, or else a description of a key combination. A key combination consists of an optional modifier name separated from a key name by a space character, such as "Ctrl ArrowLeft". On Apple devices, modifier names that include Ctrl or Alt are automatically mapped to the Command and Option keys, respectively.
To improve cross-platform compatibility, only certain modifier key combinations are allowed; a typed enumeration of these combinations is available as micd.Keystroke.
Gets or sets whether this view numbers the document lines. Attempting to set this to true when the editor is single line will have no effect.
The menuCustomizer property can be set to a function that will be called to customize the context menu before it is shown. The function is called with the default menu template and this view instance. It can return the template with or without changes, or return null to prevent display of the menu.
Gets the DOM element that contains the view.
Adds a listener for the specified type of event.
A string naming the event type.
The event listener to call when the event occurs.
Adds the view's root element to the HTML document tree, or informs the view that it was just added. For a view to function correctly, it must be aware of whether or not it is part of the DOM. As there is no way to determine this automatically in all supported browsers, this method must be called explicitly. Typical use is to pass a parent node already in the DOM to this method. It will then add the root element as if by parent.appendChild(rootElement). Or, if the second argument is also supplied, as if by parent.insertBefore(rootElement, beforeThisSibling). If a more complex insertion is required, rootElement can be added to the DOM separately and then this method called with no arguments.
If supplied, the view's root element will be appended to this node's children.
If supplied in addition to parentNode, the view's root element will be inserted before this node in the parent's children instead of appending it to the end.
Applies the specified command if possible. This method is a convenience that will route the request through the appropriate objects.
True if the command could be applied.
Applies the specified Action if possible. This method is a convenience that will route the request through the appropriate objects.
True if the action could be applied.
Applies the specified Clip if possible. This method is a convenience that will route the request through the appropriate objects.
True if the clip could be applied.
Requests that the view lose input focus, if it currently has it.
Returns whether the specified command can currently be applied. This method is a convenience that will route the request through the appropriate objects.
The command to test.
True if the command could be applied.
Returns whether the specified Action can currently be applied. This method is a convenience that will route the request through the appropriate objects.
The action to test.
True if the action could be applied.
Returns whether the specified Clip can currently be applied. This method is a convenience that will route the request through the appropriate objects.
True if the clip could be applied.
Requests that the view be given input focus.
Returns an array of DOMRect objects that describe bounding rectangles for the visual representation of the node in this view. If the node is not in the view, possibly because the view is still updating, the array will be empty. Otherwise, in most cases the node will be represented as a single rectangle. The exception is if the node has been wrapped over multiple view lines. In this case, there will be one rectangle for each line that the node spans.
The math document node to get bounding rectangles of.
The field within the node to get bounding rectangles of, or -1 for the entire node. The default is -1.
Zero or more rectangles, with coordinates relative to the upper-left corner of the page.
Returns whether the view has input focus.
True if the view will currently receive keyboard input.
Returns a Promise that resolves once any pending updates to this view have been completed.
A Promise that resolves when this view is up to date.
Simulates the user pressing a single key combination. This method does not require the view to have input focus. Passing null or undefined has no effect.
The key to simulate, described in the same format used by View.gestureMap.
Prints the math document to a printer.
A Promise that resolves to this view once the layout is prepared and printing begins.
Removes a previously added listener for the specified type of event. This method does nothing if the listener was never added.
A string naming the event type.
The event listener to stop notifying when the event occurs.
Removes the view's root element from the HTML document tree, or informs the view that it was just removed. For the View to function correctly, it must be aware of whether or not it is part of the DOM. As there is no way to determine this automatically in all supported browsers, this method must be called explicitly. If the root element is in the DOM when this method is called, it will be removed by removing it from its immediate parent.
Scrolls the view so that the caret is visible. Scrolling may not be immediate; it may be scheduled to occur in the near future after other pending updates. The View will not be scrolled if it does not have focus at the scheduled time. This method only scrolls within the View. It does not scroll the page (or other container) to ensure that the View is visible on the page. This can be done by calling, for example, view.rootElement.scrollIntoView().
Scrolls the view so that the specified document node is visible. Has no effect if the node is null or the node is not in the document of this view.
The math document node to scroll to.
Scrolls to the specified document position. Has no effect if the position is null or invalid.
The position to scroll to.
Simulates the user typing a sequence of characters on the keyboard. The view does not need to be focused or even added to the DOM. In addition to regular printable characters, the string may include \n (U+000A) to simulate typing Enter, \b (U+0008) to simulate typing Backspace, and U+007F to simulate typing Delete. Abbreviations can be used to insert complex math objects (for example, ".sum "—note the space). Commands that do not have an assigned abbreviation can be selected by their full name (for example, `".moveLeft "), although Editor.apply is more efficient.
The characters to simulate typing.
Returns a new array of all of the views that are currently on the page.
A (possibly empty) array in which each element is a view that has been added to the DOM.
Returns the view that contains the specified element, or null if the element is not part of a view.
The element (or DOM node) that may be a descendent of a view.
The view that the element is a descendent of, or null.
This API is still under development and is subject to change. Copyright © Math I Can Do Solutions Incorporated and/or its licensors.
Views allow end users to interact with an Editor through an interface component similar to a text field. Views support editing by keyboard, mouse, and touch. For a richer user experience, the view can be augmented by a Shell or used as a foundation for a custom interface.
New views are not visible until their rootElement is added to the DOM. When adding a view to the DOM, the addToDom method must be called to ensure that the view "connects" to the editor to receive and process updates.
A single editor may have multiple views. However, a given view is always tied to a single editor instance, the one passed to its constructor. To create the illusion of a single view switching between multiple editors, either use multiple views and hide those not in use, or destroy and replace a single view on demand.
Example: Create and add a View to the page