Summary

This file defines templates for a few interactive document areas called "widgets". Widgets allow the user to interact with the nearby 3D drawing area in other ways through the power of HTML. The sample widgets include a panel of controls that grows for each Component object that exists, or another one that is a source code printout with syntax highlighting, or another one that is an editor and submission system. These widgets are just examples of the many possibilities of useful panels that could be added to a document based on nested Component objects.

Controls_Widget

class Controls_Widget

Allows the user to control and interact with Components. Each panel provides interactive elements, such as buttons with key bindings, live readouts of Component data members, etc. A Controls_Widget adds a horizontal row of DOM panels to the document, one per loaded Component object that's affecting a given canvas.

constructor( component, options = {} )

Pass in the outer Component object that owns the canvas. Child components of it used for animation will be found by Controls_Widget and represented as HTML panels.

Keyboard_Manager

class Keyboard_Manager

Keyboard_Manager maintains a running list of which keys are depressed. You can map combinations of shortcut keys to the provided callback functions they should trigger by calling add(). See add()'s arguments. The shortcut list is indexed by strings, conveniently showing each bound shortcut combination.

constructor( target = document, callback_behavior = ( callback, event ) => callback( event ) )

A new Keyboard_Manager object is ready to use without any additional work. Optionally pass in target, which is the desired DOM element that should capture key events. Optionally pass in callback_behavior, which will be called for every key action to allow extra behavior on each event -- giving an opportunity to customize their bubbling, preventDefault, and more. It defaults to no additional behavior besides the callback itself on each assigned key action.

add( shortcut_combination, callback = () => {}, keyup_callback = () => {} )

Creates a keyboard operation. The argument shortcut_combination expects an array of strings that follow standard JavaScript KeyboardEvent key names. Both the keyup and keydown callbacks for any key combo are optional.

Code_Manager

class Code_Manager

Code_Manager breaks up a string containing code (any ES6 JavaScript) for syntax highlighting and display purposes. The regular expression being used to parse JavaScript code is from https://github.com/lydell/js-tokens

Note: The source above states the following limitation of the regex: "If the end of a statement looks like a regex literal (even if it isn’t), it will be treated as one." (It can miscolor lines of code containing both divisions and end-of-line comments).

constructor( code )

Pass in any string of JavaScript code. The Code_Manager will give itself members tokens and no_comments, which are arrays that respectively contain every token and every non-comment token. A token has both a type and a value. The former is for categorizing which type of JavaScript syntax it is; the latter is the actual content.

Code_Widget

class Code_Widget

Code_Widget draws a DOM element containing a code navigator panel, with colorful syntax highlighting and with inline links to the entire program source code. Clicking a linked class definition brings up that source code instead. Code_Widget considers all definitions that exist within the namespaces called tiny and defs when converting identifier names into links.

constructor( component, options = {} )

Pass in the Component that owns the document section this widget appears inside of. Option code_in_focus selects which source code class, method, or function to display. Option hide_navigator hides the table of links to all known code definitions appearing in namespaces tiny and defs.

display_code( code_in_focus )

Populate the code textbox. Pass undefined to choose index.html's source as the code to display.

Editor_Widget

class Editor_Widget

Currently does not work offline. This class is for submitting modified class definitions to online hosted repositories of tiny-graphics demos. The button to refresh the demo with updated code is currently non-working. Under construction.

constructor( component, options = {} )

Pass in the Component that owns the document section this widget appears inside of. Option rows determines the maximum amount of rows in the input before line wrapping. Option code_in_focus selects which source code class, method, or function to display.

select_class( class_definition )

Populates the editor textbox with an existing definition from source.

fetch_handler (url, body)

A general utility function for sending / receiving JSON, with error handling. This function demonstrates a generally useful technique for handling network requests for JSON data.