tapspace

Tapspace API Documentation v2.0.0-alpha.23

Choose version: v1 – v2

Welcome to Tapspace.js API documentation. Build your zoomable application with the classes and methods documented here. This document is generated with yamdog.

You might want to look examples and tutorial to learn how to combine classes and method calls to build your first zoomable applications. Rely on the API documentation when you are ready to get wild.

Naming convention of the document: ClassName, namespace, .CONSTANT, .classMethod(), :instanceProperty, :instanceMethod(), [optionalParameter], and optionalProperty?.

See also: Introduction – Examples – Tutorial - Glossary - GitHub

tapspace

The tapspace namespace provides components for space, geometry classes, and interaction tools. There are also loaders to help in managing components, images, and other resources.

Contents:

Source: lib/index.js

tapspace.capturers

Classes to capture and preprocess input such as touch gestures and mouse wheel movements.

Contents:

Source: capturers/index.js

tapspace.capturers.CameraCapturer(component)

Inherits Capturer

Captures viewport moves towards and away from the plane anchor. Meant for semantic zoom features.

Parameters:

Emits:

Under the hood: The viewport iterates planes when necessary and checks if the plane has an active camera capturer. If so, the viewport is responsible of informing the camera capturer about the camera movement. This way the plane can be connected to viewport later, not necessarily at setup phase.

Contents:

Source: CameraCapturer/index.js

tapspace.capturers.CameraCapturer:bind()

Attach listeners.

Source: CameraCapturer/index.js

tapspace.capturers.CameraCapturer:unbind()

Detach listeners.

Source: CameraCapturer/index.js

tapspace.capturers.Capturer()

A base class for capturers. Every capturer must implement this interface. Capturers may have extra methods on top of these.

Source: Capturer/index.js

tapspace.capturers.GestureCapturer(component, options)

Inherits Capturer

Begin to capture and recognize pointer gestures on the given component and emit them as gesture events. The component does not need to be connected to camera at the time of construction, but eventually it needs to be connected in order to capture gestures.

Parameters:

Emits

Gesture event objects have following properties:

Contents:

Source: GestureCapturer/index.js

tapspace.capturers.GestureCapturer:bind()

Start event listeners and gesture capturing.

Source: GestureCapturer/index.js

tapspace.capturers.GestureCapturer:getFreedom()

Get freedom object for example for debugging.

Source: GestureCapturer/index.js

tapspace.capturers.GestureCapturer:unbind()

Unbind the DOM element listeners of the sensor. Unbind own listeners, if any.

Source: GestureCapturer/index.js

tapspace.capturers.GestureCapturer:update(options)

Update capturer options.

Parameters:

Source: GestureCapturer/index.js

tapspace.capturers.KeyboardCapturer(component, options)

Inherits Capturer

Keyboard capturer detects keyboard events and preprocess them for further interaction logic.

Note that only focusable HTMLElements emit keyboard events. Note also that while the keyboard events bubble in DOM, the capturer will re-emit only those that target the captured element, not any of its descendants.

Parameters:

Emits

Contents:

Source: KeyboardCapturer/index.js

tapspace.capturers.KeyboardCapturer:bind()

Attach event listeners.

Source: KeyboardCapturer/index.js

tapspace.capturers.KeyboardCapturer:unbind()

Remove all keyboard event listeners from the element.

Source: KeyboardCapturer/index.js

tapspace.capturers.KeyboardCapturer:update(options)

Update capturer options.

Source: KeyboardCapturer/index.js

tapspace.capturers.ResizeCapturer(component)

Inherits Capturer

Resize event capturer.

Parameters:

Emits

Resize event object has properties:

Contents:

Source: ResizeCapturer/index.js

tapspace.capturers.ResizeCapturer:bind()

Start listeners and observers.

Source: ResizeCapturer/index.js

tapspace.capturers.ResizeCapturer:unbind()

Stop resize observation.

Source: ResizeCapturer/index.js

tapspace.capturers.WheelCapturer(component, options)

Inherits Capturer

Mouse wheel capturer. Attempts to normalise and add compatibility to wheeling and scrolling.

Parameters:

Emits

Wheel-gesture object has properties:

Contents:

Source: WheelCapturer/index.js

tapspace.capturers.WheelCapturer:bind()

Attach event listeners.

Source: WheelCapturer/index.js

tapspace.capturers.WheelCapturer:unbind()

Remove all wheel capturer event listeners from the element.

Source: WheelCapturer/index.js

tapspace.capturers.WheelCapturer:update(options)

Update capturer options.

Source: WheelCapturer/index.js

tapspace.components

Various components to render into tapspace.

Core components:

Special components:

Viewport controls:

Abstract components:

Inheritance chart:

Inheritance between core components

Contents:

Source: components/index.js

tapspace.components.Animatable

Provides a Component animation abilities.

Contents:

Source: Animatable/index.js

tapspace.components.Animatable:animate(options)

Update CSS transition animation properties of the component. These animation properties will be applied to every transformation until rewritten.

Parameters:

Returns:

Source: animate.js

tapspace.components.Animatable:animateOnce

Animate the next move of the component. Uses CSS transition property. After the animation ends, the animation settings are removed so that the next transformation is not animated by default.

Parameters:

Returns:

Source: animateOnce.js

tapspace.components.Animatable:cancelAnimation

Cancel current animation.

Returns:

Source: cancelAnimation.js

tapspace.components.Arc(angle, border)

Inherits FrameComponent

Arc is an instance class for curved edges. Use Arc to visually connect components. Arc is rendered flat (2D). Use setPoints(start, end) to place the arc.

Parameters:

Under the hood: Arc is implemented by a rounded-border div that is cropped to display only a portion of its circle edge by a container with overflow:hidden.

Contents:

Source: Arc/index.js

tapspace.components.Arc:getLength()

Compute arc length.

Returns:

Source: getLength.js

tapspace.components.Arc:getRadius()

Get the arc radius. The smaller the sector angle, the bigger the radius.

Returns:

Source: getRadius.js

tapspace.components.Arc:setPoints(startPoint, endPoint)

Set arc start and end points.

Parameters:

Returns:

Source: setPoints.js

tapspace.components.Arc.create(angle, border)

tapspace.createArc

Create an Arc item. Arcs are like edges but with a curved shape.

Parameters:

Returns:

Source: create.js

tapspace.components.BlockComponent(element)

Inherits Transformer

BlockComponent is an abstract class for rectangular affine components that cannot change their size or the size depends on the browser layout. For example, Viewport is a BlockComponent because its dimensions depend on external CSS rules and page dimensions.

Subclasses must override methods:

Parameters:

Contents:

Source: BlockComponent/index.js

tapspace.components.BlockComponent:atBottomLeft()

Get point at the bottom left corner of the element.

Returns:

Source: atBottomLeft.js

tapspace.components.BlockComponent:atBottomMid()

Get point at the middle of the bottom edge of the element.

Returns:

Source: atBottomMid.js

tapspace.components.BlockComponent:atBottomRight()

Get point at the bottom right corner of the element.

Returns:

Source: atBottomRight.js

tapspace.components.BlockComponent:atCenter

Alias of tapspace.components.BlockComponent:atMid

tapspace.components.BlockComponent:atMid()

Get point at the middle the element.

Returns:

Aliases: tapspace.components.BlockComponent:atMidMid, tapspace.components.BlockComponent:atMiddle, tapspace.components.BlockComponent:atCenter

Source: atMidMid.js

tapspace.components.BlockComponent:atMidLeft()

Get point at the middle of the left edge of the element.

Returns:

Source: atMidLeft.js

tapspace.components.BlockComponent:atMidMid

Alias of tapspace.components.BlockComponent:atMid

tapspace.components.BlockComponent:atMidRight()

Get point at the middle of the right edge of the element.

Returns:

Source: atMidRight.js

tapspace.components.BlockComponent:atMiddle

Alias of tapspace.components.BlockComponent:atMid

tapspace.components.BlockComponent:atNorm(rx, ry)

Subclasses must override this method.

Get a point by coordinates that are normalized over the width and height so that (0,0) means the top-left and (1,1) the bottom-right corner.

Parameters:

Returns:

Aliases: tapspace.components.BlockComponent:getNormalizedPoint

Source: atNorm.js

tapspace.components.BlockComponent:atTopLeft()

Get point at the top left corner of the element.

Returns:

Source: atTopLeft.js

tapspace.components.BlockComponent:atTopMid()

Get point at the middle of the top edge of the element.

Returns:

Source: atTopMid.js

tapspace.components.BlockComponent:atTopRight()

Get point at the top right corner of the element.

Returns:

Source: atTopRight.js

tapspace.components.BlockComponent:getArea()

Get the block area.

Returns:

Source: getArea.js

tapspace.components.BlockComponent:getBoundingBox()

Get the bounding box of the block.

Returns:

Source: getBoundingBox.js

tapspace.components.BlockComponent:getBoundingCircle()

Get the bounding circle of the block.

Returns:

Source: getBoundingCircle.js

tapspace.components.BlockComponent:getDiameter()

Get the block diameter, from corner to opposite corner.

Returns:

Source: getDiameter.js

tapspace.components.BlockComponent:getHeight()

Subclasses must override this method.

Get block height as a Distance.

Returns:

Source: getHeight.js

tapspace.components.BlockComponent:getInnerSquare()

Get the largest square box inside the block that has the same center.

Returns:

Source: getInnerSquare.js

tapspace.components.BlockComponent:getNormalizedPoint

Alias of tapspace.components.BlockComponent:atNorm

tapspace.components.BlockComponent:getSize()

Subclasses must override this method.

Get block size dimensions.

Returns:

Source: getSize.js

tapspace.components.BlockComponent:getWidth()

Subclasses must override this method.

Get block width as a Distance.

Returns:

Source: getWidth.js

tapspace.components.BlockComponent:moveCenterTo(position)

Translate the block so that its middle point matches the given point.

Parameters:

Returns:

Source: moveCenterTo.js

tapspace.components.BlockComponent:normAt(x, y)

Subclasses must override this method.

Get normalized coordinates from a point. Practically this is the inverse of BlockComponent:atNorm. For example, let a block have size (4, 4). Then the normalized coords for the point (2, 1) are (0.5, 0.25).

Parameters:

Parameters (alternative):

Returns:

Source: normAt.js

tapspace.components.BlockComponent:scaleToFill(size[, pivot])

Scale this block so that it can contain the given size. A rectangle of the given size could just fit inside the scaled block. The scaling is performed about a pivot point. See BlockComponent:scaleToFit to fit inside a size.

Parameters:

Returns:

Source: scaleToFill.js

tapspace.components.BlockComponent:scaleToFit(size[, pivot])

Scale this block to the largest scale that can still fit inside the size. In other words, a rectangle of the given size could just be able to contain the scaled block. The scaling is performed about a pivot point. See also BlockComponent:scaleToFill

Parameters:

Returns:

Source: scaleToFit.js

tapspace.components.BlockComponent:scaleToHeight(height[, pivot])

Scale this block to the given height and maintain the aspect ratio. The block is not resized, only its basis scaled. The scaling is performed about a pivot point.

Parameters:

Returns:

Source: scaleToHeight.js

tapspace.components.BlockComponent:scaleToWidth(width[, pivot])

Scale this block to the given width and maintain aspect ratio. The block is not resized, only its basis scaled. The scaling is performed about a pivot point.

Parameters:

Returns:

Source: scaleToWidth.js

tapspace.components.Component(element)

Inherits Emitter

Component is an abstract class for all space components. Each component has an HTML element and a Basis position relative to its parent component. Nested components form an affine subtree in DOM.

Parameters:

Contents:

Source: Component/index.js

tapspace.components.Component:addChild(component, position)

Place a component onto this basis. In DOM, appends the element of the given component into the element of this basis. Appending means that the component is added after the last child. To add before the first child, see Component:prependChild.

Parameters:

Returns:

Complexity:

Aliases: tapspace.components.Component:appendChild

Source: addChild.js

tapspace.components.Component:addClass(className[, secondClass[, …]])

Add one or more CSS class name into the affine element, up to three. This is equivalent to basis.element.classList.add(className).

Example:

Parameters:

Returns:

Complexity:

Source: addClass.js

tapspace.components.Component:addLink(key, target)

Parameters:

Source: addLink.js

tapspace.components.Component:appendChild

Alias of tapspace.components.Component:addChild

tapspace.components.Component:at(x, y, z)

Get a Point on the basis from local coordinates.

Parameters:

Returns:

Aliases: tapspace.components.Component:getPoint

Source: at.js

tapspace.components.Component:atAnchor()

Get origin point. At zero by default.

Returns:

Source: atAnchor.js

tapspace.components.Component:bringAbove(target)

Reinsert the element above the given target element.

This method reorders elements in DOM. That can cause elements to lose their hover state in some browsers. See issue #173 for details.

Parameters:

Returns:

Source: bringAbove.js

tapspace.components.Component:bringToFront()

Remove this element and reinsert it as the last child.

This method reorders elements in DOM. That can cause elements to lose their hover state in some browsers. See issue #173 for details.

Returns:

Source: bringToFront.js

tapspace.components.Component:createBasis(origin, scale, orientation)

Create a Basis on this component.

Parameters:

Returns:

Source: createBasis.js

tapspace.components.Component:createDirection(theta[, phi])

Create a Direction from the spherical coordinate angles theta and phi relative to the component.

Parameters:

Returns:

Source: createDirection.js

tapspace.components.Component:createOrientation(angle)

Create an Orientation on this basis.

Parameters:

Returns:

Source: createOrientation.js

tapspace.components.Component:createVector(x, y[, z])

Create a Vector on this basis.

Parameters:

Returns:

Source: createVector.js

tapspace.components.Component:findCommonAncestor(node)

Find lowest common affine ancestor of this and the given node. If a mother has two children and the father of the mother is the grandfather of the children, then the lowest common ancestor for the children is the mother. If the mother has a sister from the same father, then the grandfather is the lowest common ancestor of the sister and one of the children.

Parameters:

Returns:

Complexity:

Note that the result might not be a true ancestor:

Source: findCommonAncestor.js

tapspace.components.Component:followLink(key)

Get link target.

Parameters:

Returns:

Source: followLink.js

tapspace.components.Component:getAncestors()

Get an array of affine ancestors of this node, ordered from the immediate parent to the farthest ancestor, the immediate parent first. The list of ancestors includes a space and a viewport, given that the node is placed in a space.

Returns:

Complexity

Source: getAncestors.js

tapspace.components.Component:getBasis()

Get the virtual basis of this component. Provides a way to construct new bases via transformations without transforming the component itself. Can also be used to match bases between components.

Example:

> const basis = item.getBasis().rotateByDegrees(45)
> anotherItem.setBasis(basis)

Returns:

Source: getBasis.js

tapspace.components.Component:getBasisAt(origin)

Get a virtual basis on this component. The basis has same scale and orientation as the viewport but matches the given origin point.

Example:

> const basis = item.getBasisAt(item.atBottomLeft())
> anotherItem.setBasis(basis)

Parameters:

Returns:

Source: getBasisAt.js

tapspace.components.Component:getChildren()

Get all affine child nodes of this node. The children are found via DOM. The children in DOM that do not have affine properties will be skipped.

Returns:

Complexity

Source: getChildren.js

tapspace.components.Component:getDescendants()

All affine descendants in a list, including the children of this node. The affine descendants must be connected in affine part of DOM.

Returns:

Complexity:

Source: getDescendants.js

tapspace.components.Component:getElement()

Get the affine HTML element of the node. Each Component has one HTML element. This element can wrap further affine or non-affine content.

Returns:

Complexity:

Source: getElement.js

tapspace.components.Component:getLeaves()

All affine leaf descendants in a list. A leaf has no own children. The affine leaves must be connected to this node in the subset of DOM. An affine leaf may have non-affine children in DOM.

Returns:

Complexity:

Source: getLeaves.js

tapspace.components.Component:getOrientation()

Get the orientation of this component. Provides a way to match the orientation between components.

Returns:

Source: getOrientation.js

tapspace.components.Component:getParent()

Get the affine parent of the plane. Null if no affine parent.

Returns:

Complexity:

Source: getParent.js

tapspace.components.Component:getPoint

Alias of tapspace.components.Component:at

tapspace.components.Component:getRoot()

Get the affine root. Will return self if has no affine parent.

Returns:

Complexity

Source: getRoot.js

tapspace.components.Component:getScale()

The scale of the basis.

Returns:

Source: getScale.js

tapspace.components.Component:getTransitionFrom(source[, silent])

Compute a coordinate transition matrix from the source basis to this basis. The transition matrix can be used to convert coordinates and geometry between bases. Note that if one of the two bases or a basis between them moves then you should compute the transition matrix again.

Parameters:

Returns:

Complexity

Source: getTransitionFrom.js

tapspace.components.Component:getTransitionTo(target[, silent])

Compute a transition that maps the coordinate system of this basis to the coordinate system of the target basis. The resulting transition is an affine transformation that can be applied to geometry on this basis to compute the same geometry represented on the the target basis.

Parameters:

Returns:

Throws:

Complexity

Source: getTransitionTo.js

tapspace.components.Component:getTransitionToParent()

Get a coordinate transition matrix from this basis to its parent basis. If this basis does not have a parent, it is either root affine node in DOM or is not yet added to DOM, and in this case a transition matrix to a virtual parent is returned.

Returns:

Complexity

Source: getTransitionToParent.js

tapspace.components.Component:getTransitionToParentOf(target)

Get transition from this basis to the parent basis of the target. If the target is a root, then transition is to its virtual parent.

Parameters:

Returns:

Complexity

Source: getTransitionToParentOf.js

tapspace.components.Component:getViewport()

Get the affine viewport this basis currently belongs to, if any. Will return null if the basis is not connected to a viewport. Useful for checking if the component is rendered.

Returns:

Complexity

Source: getViewport.js

tapspace.components.Component:hasClass(className)

Test if the element has the given class name. This is equivalent to basis.element.classList.contains(className).

Example:

Parameters:

Returns:

Source: hasClass.js

tapspace.components.Component:hasLink(key)

Parameters:

Returns:

Source: hasLink.js

tapspace.components.Component:isLeaf()

This basis is a leaf if it has no affine children in DOM. A leaf can have non-affine children in DOM. A basis that is not a leaf has one or more affine children and may also have non-affine chilren.

Returns:

Complexity

Source: isLeaf.js

tapspace.components.Component:isRoot()

Test is the basis an affine root i.e. does the element have no affine parent. A root basis can have non-affine parent in DOM.

Returns:

Complexity

Source: isRoot.js

tapspace.components.Component:orderByDepth()

Sort the affine child components in DOM according to their z-coordinate. The larger the z coord, the farther the component. In other words, the smallest z coord is positioned to be the last and thus the topmost to render. Note that the order is opposite when compared to the z-index CSS rule. You can use the z-index rule to make exceptions to the rendering order defined by the sorted DOM.

Returns:

Complexity

Source: sortByDepth.js

tapspace.components.Component:prependChild(component, position)

Place a component onto this basis. In DOM, adds the element of the given component into the element of this basis before the first child. To add after the last child, see Component:appendChild.

Parameters:

Returns:

Complexity:

Source: prependChild.js

tapspace.components.Component:remove()

Remove this component from its parent, if any. If you also need to remove active listeners, call component.off().

Returns:

Source: remove.js

tapspace.components.Component:removeChild(child)

Remove the specified child component from this component. You might want to call child.off() to also remove any active listeners.

Parameters:

Returns:

Source: removeChild.js

tapspace.components.Component:removeClass

Remove a CSS class name from the affine element. This is equivalent to basis.element.classList.remove(className).

Parameters:

Returns:

Complexity

Source: removeClass.js

tapspace.components.Component:removeLink(key, target)

Parameters:

Source: removeLink.js

Remove all links.

Returns:

Source: removeLinks.js

tapspace.components.Component:replaceChild(oldChild, newChild)

Removes a child and replaces its position with a new one. The operation preserves the anchor position, scale, and orientation of the children. Size is not preserved, thus the new child might occupy larger or smaller area than the replaced one.

Parameters:

Returns:

Throws:

Source: replaceChild.js

tapspace.components.Component:replaceParent(newParent)

Switches the parent by preserving the global position. Useful for example when you need to remove the parent but want to preserve some of the children at their original positions.

To specify a new position or to preserve the local position with respect to the parent origin, see Component:setParent.

Parameters:

Returns:

Throws:

Source: replaceParent.js

tapspace.components.Component:requestIdle()

Targeted for internal use.

Ask component to emit an idle event. The idle events are used for computationally heavy tasks. Therefore this method attempts to limit the frequency of idle events by throttling and respecting ongoing animations.

Returns:

Source: requestIdle.js

tapspace.components.Component:sendBelow(target)

Reinsert this element below the given target element. In other words, reinsert this element just before the target in DOM so that the target is rendered after this element.

This method reorders elements in DOM. That can cause elements to lose their hover state in some browsers. See issue #173 for details.

Parameters:

Returns:

Source: sendBelow.js

tapspace.components.Component:sendToBack()

Remove this element and reinsert it as the first child. The element will be rendered first and thus becomes the farthest and and bottommost.

This method reorders elements in DOM. That can cause elements to lose their hover state in some browsers. See issue #173 for details.

Returns:

Source: sendToBack.js

tapspace.components.Component:setId

Set the affine element ID property. This is equivalent to basis.element.id = elemId.

Parameters:

Returns:

Complexity:

Source: setId.js

tapspace.components.Component:setParent(newParent[, position])

Appends the basis node as a child of another basis. Removes the basis from the current parent, if any. Appending places the node after its siblings in DOM.

The operation allows a position which defines where this node will be added on the parent. Omitting the position preserves the local placement of the node while not preserving the global placement. See Component:replaceParent to preserve the global placement.

Parameters:

Returns:

Source: setParent.js

tapspace.components.Component.findAffineAncestor(el)

Find the nearest affine element, if any. Travels DOM towards document root and tests each element along the way for affine properties until one is found or the document root is reached.

Example:

const btn = document.getElementById('mybutton')
const affine = Component.findAffineAncestor(btn)
if (affine) { affine.rotateByDegrees(10) }

Parameters:

Returns:

Complexity:

Source: findAffineAncestor.js

tapspace.components.Component.isAffine(element)

Test if the given HTMLElement is affine. An HTMLElement is affine if elem.affine object is set and that the elem.affine is a Component or inherits Component.

Example:

const el = document.getElementById('myelem')
if (Component.isAffine(el)) { ... }

Parameters:

Returns:

Complexity:

Source: isAffine.js

tapspace.components.Composite(element)

Inherits Transformer

An abstract class for components that have no intrinsic size but rather are a collection of child components and their descendants. Composite sizes and boundaries are determined by the shapes of the descendants.

Parameters:

Contents:

Source: Composite/index.js

tapspace.components.Composite:getBoundingBox([orientation])

Get bounding box of the children and their descendants. Can be computationally heavy if there is lots of descendants. You can specify custom orientation for the box.

Optional basis determines the orientation of the box.

Parameters:

Returns:

Source: getBoundingBox.js

tapspace.components.Composite:getBoundingCircle()

Get bounding circle of the children and their descendants. Can be computationally heavy if there is lots of descendants.

Returns:

Source: getBoundingCircle.js

tapspace.components.Composite:getSize()

Get the size of the bounding box of the component, including the children and their descendants. Can be computationally heavy if there is lots of descendants.

Returns:

Source: getSize.js

tapspace.components.CustomControl(html)

Inherits ViewportControl

This control provides a way to display custom HTML content that is fixed to the viewport. Useful for logos, search, and legal text.

Parameters:

Contents:

Source: CustomControl/index.js

tapspace.components.CustomControl:html(content)

Set control HTML content. Any pre-existing content is removed.

content

Returns:

Source: html.js

tapspace.components.CustomControl.create

Alias of tapspace.createControl

tapspace.components.Edge([width])

Inherits FrameComponent

Edge is an instance class for an empty div with border or background style. It can be used as a line. Lines can visually connect components. Use setPoints(start, end) to place the edge.

Example:

const edge = tapspace.createEdge(2)
edge.addClass('my-edge')
edgeGroup.addChild(edge)
edge.setPoints(itemA.atBottomMid(), itemB.atTopMid()) 
.my-edge {
  background: linear-gradient(0.25turn, black, white);
  border-top: 2px dotted black;
}

Parameters:

Under the hood: The width determines how much we need to offset the edge element so that the edge endpoints match the middle of the border.

Contents:

Source: Edge/index.js

tapspace.components.Edge:atEnd()

Get the Point at the edge ending, at the middle of the border.

Returns: a Point

Source: atEnd.js

tapspace.components.Edge:atStart()

Get the Point at the edge beginning, at the middle of the border.

Returns: a Point

Source: atStart.js

tapspace.components.Edge:getBoundingBox()

Get the bounding box of the edge.

Returns:

Source: getBoundingBox.js

tapspace.components.Edge:getLength()

Get length of the edge.

Returns:

Source: getLength.js

tapspace.components.Edge:renderTransform()

Refresh the edge orientation.

Source: renderTransform.js

tapspace.components.Edge:setPoints(startPoint, endPoint)

Set edge start and end points. Note that this does not scale the edge.

Parameters:

Returns:

Source: setPoints.js

tapspace.components.Edge:setWidth(width)

Change edge pixel width.

Parameters:

Returns:

Source: setWidth.js

tapspace.components.Edge:trimPoints(startPoint, endPoint, trimStart[, trimEnd])

Set edge points but trim a distance from each end. Useful for drawing edges between round-shaped nodes. Note that this does not scale the edge but translates, resizes and orients it.

Parameters:

Returns:

Source: trimPoints.js

tapspace.components.FrameComponent(element)

Inherits BlockComponent

Abstract class for rectangular affine components that can change their size.

Parameters:

Contents:

Source: FrameComponent/index.js

tapspace.components.FrameComponent:atNorm(rx, ry[, rz])

Get a point from normalized coordinates that are scaled relative to the element width and height. See also FrameComponent:normAt.

Parameters:

Returns:

Aliases: tapspace.components.FrameComponent:getNormalizedPoint

Source: atNorm.js

tapspace.components.FrameComponent:getHeight()

Get frame height as a Distance.

Returns:

Source: getHeight.js

tapspace.components.FrameComponent:getNormalizedPoint

Alias of tapspace.components.FrameComponent:atNorm

tapspace.components.FrameComponent:getSize()

Get frame size dimensions in pixels.

Returns:

Source: getSize.js

tapspace.components.FrameComponent:getWidth()

Get frame width as a Distance.

Returns:

Source: getWidth.js

tapspace.components.FrameComponent:matchPixelSize(target)

Resize this frame so that its pixel size matches the pixel size of the target regardless of their scale. If you need to match their physical sizes after scale, use FrameComponent:matchSize.

Parameters:

Returns:

Source: matchPixelSize.js

tapspace.components.FrameComponent:matchSize(target)

Resize this frame so that its physical size matches the physical size of the target. The physical size is the size after scaling. If you need to match the inner width and height in pixels regardless of scale, use FrameComponent:matchPixelSize.

Parameters:

Returns:

Source: matchSize.js

tapspace.components.FrameComponent:normAt(x, y)

Get normalized coordinates from a point. Practically this is the inverse of FrameComponent:atNorm. For example, let a frame have size (4, 4). Then the normalized coords for the point (2, 1) are (0.5, 0.25).

Parameters:

Parameters (alternative):

Returns:

Source: normAt.js

tapspace.components.FrameComponent:resizeTo(newSize[, pivot])

Set the component size to the given size. Additionally, move the component so that the pivot point position of the box stays intact. For example, if the pivot is at right edge then a width decrease would keep the right edge still and bring the left edge closer.

By default, the pivot is equal to the transform origin of the component. In that case the transform origin stays fixed in space during the resize. With a custom pivot that is not equal to the transform origin, the transform origin will move in space during resize but its relative position on the component is preserved. For example if the transform origin was at the component center, it is still at the component center after the resize.

To preserve the absolute position of the transform origin and the space position of the top left corner, see FrameComponent:setSize.

Parameters:

Returns:

Source: resizeTo.js

tapspace.components.FrameComponent:setHeight(height[, pivot])

Resize this frame to the given height. Keep width intact thus do not preserve the aspect ratio. The resize is performed about a fixed pivot point.

Parameters:

Returns:

Source: setHeight.js

tapspace.components.FrameComponent:setSize(newSize)

Set component size. This does not change the scale or depth of the element, only the local pixel width and height.

Note this method preserves the absolute position of the anchor. Therefore the relative anchor position (relative to the size) will change. To preserve the relative anchor position, see FrameComponent:resizeTo().

Parameters:

Parameters (alternative):

Returns:

Source: setSize.js

tapspace.components.FrameComponent:setWidth(width[, pivot])

Resize this frame to the given width. Keep height intact thus do not preserve the aspect ratio. The resize is performed about a fixed pivot point.

Parameters:

Returns:

Source: setWidth.js

tapspace.components.FrameComponent:transformToFill(target[, ratio])

Transform the component so that it fully contains the target. In other words, transform so that the target fits inside the component. See FrameComponent:transformToFit to fully fit inside the target.

Parameters:

Returns:

Source: transformToFill.js

tapspace.components.FrameComponent:transformToFit(target[, ratio])

Transform the component so that it fully fits inside the target. In other words, transform so that the target fills the frame entirely. See FrameComponent:transformToFill to fit the target inside the frame.

Parameters:

Returns:

Source: transformToFit.js

tapspace.components.Hyperspace(viewport)

Inherits Composite, Animatable

Hyperspace is a part of viewport and acts as a container for spaces. Viewport needs Hyperspace to keep ViewportControls and Spaces separate and still enable coordinate transitions between controls and the space.

Unlike Space, Hyperspace implements a floating origin. The floating origin adapts to the relative positions of the viewport and spaces in order to diminish error caused by floating point arithmetic when the user travels over vast spaces. Therefore the coordinate system of the hyperspace, unlike the viewport and its spaces, changes over time and cannot be used as a reliable reference to position content.

Contents:

Source: Hyperspace/index.js

tapspace.components.Hyperspace:atAnchor()

Reuse viewport anchor.

Source: atAnchor.js

tapspace.components.Hyperspace:commit()

Push hyperspace transformation to the spaces.

Returns:

Source: commit.js

tapspace.components.Hyperspace:renderTransform()

Update the element.style.transform according to the basis placement.

You need to call this function only when you have manually edited or replaced the hyperspace.tran object and want to commit the edit to CSS.

Returns:

Source: renderTransform.js

tapspace.components.Hyperspace:rotateBy(radians, pivot)

Rotate the hyperspace with respect to the viewport.

Parameters:

Returns:

Source: rotateBy.js

tapspace.components.Hyperspace:scaleBy(multiplier, pivot)

Scale the hyperspace with respect to the viewport.

Parameters:

Returns:

Source: scaleBy.js

tapspace.components.Hyperspace:transformBy(tr, origin)

Use this to navigate the spaces. Transform the spaces in relation to the viewport. In effect, this transforms the immediate children of the hyperspace.

Currently, the transition from hyperspace to viewport stays at the identity and intact. In future, the transformation methods of hyperspace can choose whether to transform the spaces or the hyperspace in order to bring numerical stability.

Parameters:

Returns:

Source: transformBy.js

tapspace.components.Hyperspace:translateBy(translation)

Translate the hyperspace in relation to the viewport along x, y, and z axis.

Parameters:

Returns:

Source: translateBy.js

tapspace.components.Interactive()

Interaction methods for affine components. Designed to be inherited by instance classes that also inherit Transformer.

Contents:

Source: Interactive/index.js

tapspace.components.Interactive:addInteraction(name, interaction)

Register an interaction. Throws if interaction for this name already exists.

Parameters:

Returns:

Source: addInteraction.js

tapspace.components.Interactive:capturer(capturerName, opts)

Get or create an input capturer. For Tapspace internal use.

Parameters:

Returns:

Aliases: tapspace.components.Interactive:startCapturer, tapspace.components.Interactive:updateCapturer, tapspace.components.Interactive:getCapturer

Source: capturer.js

tapspace.components.Interactive:converter(converterName, opts)

Get or create an input converter. The converters modify or redirect input events. For Tapspace internal use.

Parameters:

Returns:

Source: converter.js

tapspace.components.Interactive:focus()

Subclasses should implement this method.

Source: focus.js

tapspace.components.Interactive:focusable(options)

Make the item focusable. This means that the item can receive keyboard events, steal focus from other elements, be reachable by tabbing, and be visually outlined. Item must be focusable in order to use Interactive:focus successfully. Call focusable(false) to disable the ability.

Parameters:

Returns:

Source: focusable.js

tapspace.components.Interactive:getCapturer(capturerName)

Alias of tapspace.components.Interactive:capturer

tapspace.components.Interactive:getCapturer(capturerName)

Get specific capturer if the component has one. Null if does not.

Parameters:

Returns:

Source: getCapturer.js

tapspace.components.Interactive:getInteraction(name)

Get an interaction. Might be null.

Returns:

Source: getInteraction.js

tapspace.components.Interactive:hasCapturer(capturerName)

Test if the component has an active capturer.

Parameters:

Returns:

Source: hasCapturer.js

tapspace.components.Interactive:hasInteraction(name)

Test if the component has an active interaction.

Example:

> item.hasInteraction('tap')
false

Returns:

Source: hasInteraction.js

tapspace.components.Interactive:removeAllInteractions()

Unregister all interactions.

Returns:

Source: removeAllInteractions.js

tapspace.components.Interactive:removeInteraction(name)

Unregister an interaction. If interaction does not exist, does nothing.

Parameters:

Returns:

Source: removeInteraction.js

tapspace.components.Interactive:setContentInput([device0, device1, …])

Enable interactions with the content inside item instead of the item. Select which devices (event sources) become dedicated for the content. Devices that were not selected, become dedicated for the affine item and its affine ancestors. Set false to disable all interaction with the content.

Example 1: Item has scrollable content that should scroll instead of the viewport zooming in or out.

item.setContentInput('wheel')

Example 2: Item contains selectable text, forms, or links that should be interactive instead of the viewport panning.

item.setContentInput('pointer')

Example 3: Item content should not be interactive. All input should go to the item, for example if the item is draggable, or further to the viewport.

item.setContentInput(false)

Parameters:

Parameters (alternative):

Returns:

Source: setContentInput.js

tapspace.components.Interactive:startCapturer(capturerName, opts)

Alias of tapspace.components.Interactive:capturer

tapspace.components.Interactive:stopCapturer(capturerName)

Remove element listeners and the capturer.

Parameters:

Returns:

Source: stopCapturer.js

tapspace.components.Interactive:updateCapturer(capturerName, opts)

Alias of tapspace.components.Interactive:capturer

tapspace.components.Item(element)

Inherits FrameComponent and Interactive

Item is an instance class for interactive material items in affine space. The items can have abilities like slidable, tappable, or draggable.

Parameters:

Contents:

Source: Item/index.js

tapspace.components.Item:approachable(options)

Make the item reactive to camera proximity.

Parameters:

Parameters (alternative):

Makes the item emit:

Returns:

Source: approachable.js

tapspace.components.Item:dilatable

Alias of tapspace.components.Item:scalable

tapspace.components.Item:disable()

Makes the item non-operational, a kind of anti-interaction. In addition to removing all ongoing interactions, it prevents the default actions of its parents and ancestors.

Returns:

Source: disable.js

tapspace.components.Item:draggable(options)

Make item draggable. The item can be moved freely by a set of pointers. The item maintains the size and the angle.

Parameters:

Returns:

Aliases: tapspace.components.Item:pannable, tapspace.components.Item:translatable

Source: draggable.js

tapspace.components.Item:focus(options)

Give focus to the item and optionally move viewport to look at it.

Parameters:

Returns:

Source: focus.js

tapspace.components.Item:holdable(options)

Make the item holdable and emit hold events. See interaction.Hold.

Returns:

Source: holdable.js

tapspace.components.Item:html(content)

Set affine element contents. Any pre-existing content is removed.

content

Returns:

Source: html.js

tapspace.components.Item:pannable

Alias of tapspace.components.Item:draggable

tapspace.components.Item:rotatable(options)

A rotatable item can be turned around a pivot point.

Parameters:

Returns:

Aliases: tapspace.components.Item:rotateable

Source: rotatable.js

tapspace.components.Item:rotateable

Alias of tapspace.components.Item:rotatable

tapspace.components.Item:scalable(options)

A dilatable item can be scaled larger and smaller. Interaction can modify item scale but does not affect the pixel size.

Parameters:

Returns:

Aliases: tapspace.components.Item:dilatable

Source: scalable.js

tapspace.components.Item:slidable(options)

A slidable component can be moved along a straight line.

Parameters:

Returns:

Aliases: tapspace.components.Item:slideable

Source: slidable.js

tapspace.components.Item:slideable

Alias of tapspace.components.Item:slidable

tapspace.components.Item:tappable(options)

Make item tappable i.e. make it emit tap events. See tapspace.interaction.Tap for details.

Parameters:

Makes the component emit events:

Returns:

Source: tappable.js

tapspace.components.Item:translatable

Alias of tapspace.components.Item:draggable

tapspace.components.Node(radius, color)

Inherits Item

A colorful circle. Instance class for a circle-like object on an affine plane. Useful for debugging coordinate positions.

Parameters:

Contents:

Source: Node/index.js

tapspace.components.Node:getBoundingBox([orientation])

Get the bounding box of the node. Takes into account the circle shape of the node.

Parameters:

Returns:

Source: getBoundingBox.js

tapspace.components.Node:getBoundingCircle()

Get the bounding circle of the node. Takes into account the circle shape of the node.

Returns:

Source: getBoundingCircle.js

tapspace.components.Node:getDiameter()

Get the circle diameter.

Returns:

Source: getDiameter.js

tapspace.components.Node:getRadius()

Get the circle radius.

Returns:

Source: getRadius.js

tapspace.components.Space()

Inherits Composite

A boundless container for space components.

Example:

const nodespace = tapspace.createSpace()
viewport.addChild(nodespace)
const node = tapspace.createNode(20)
nodespace.addChild(node)

Contents:

Source: Space/index.js

tapspace.components.Space.create

Alias of tapspace.createSpace

tapspace.components.Transformer(element)

Inherits Component

Abstract class for space components that need to be transformable, meaning that they can be moved around, rotated, and scaled.

Parameters:

Contents:

Source: Transformer/index.js

tapspace.components.Transformer:atAnchor(alt)

Get the transformer anchor point. This is practically the center of mass of the component. Transformations that apply a pivot point, will default to the anchor point.

Optionally, this method can be used to normalize undefined points to the anchor.

Parameters:

Returns:

Source: atAnchor.js

tapspace.components.Transformer:getDistanceTo(target)

Get distance between the transformer anchor to the anchor of the target Component. If the target does not have an anchor, default is (0,0).

Parameters:

Returns:

Source: getDistanceTo.js

tapspace.components.Transformer:getPosition()

Get the position of the transformer anchor, represented on the parent. The main difference between getPosition and atAnchor is that getPosition will return null if the plane has no parent, where atAnchor will return the local anchor point regardless.

Returns:

Source: getPosition.js

tapspace.components.Transformer:getVectorTo(target)

Get vector from this component’s anchor to the target. If target does not have an anchor, we assume (0,0) for the anchor.

Parameters:

Returns:

Source: getVectorTo.js

tapspace.components.Transformer:match(params)

Matching is a powerful way to position elements without the need to know their exact rotation, scaling, or translation. Give one or more source points and their targets. The match operation attempts to move the basis so that the source points match their target points exactly or as closely as possible. Supports translations 3D but scalings and rotations only in 2D on xy-plane.

Parameters:

Returns:

Source: match.js

tapspace.components.Transformer:matchBasis(source, target)

Transform the element so that source basis position on the element will match the target basis.

Parameters:

Returns:

Source: matchBasis.js

tapspace.components.Transformer:matchPoint(source, target)

Moves the element so that source point position on the element matches the target position.

Parameters:

Returns:

Source: matchPoint.js

tapspace.components.Transformer:renderTransform(alt)

Update the element.style.transform according to the basis placement.

You need to call this function only when you have manually edited or replaced the component.tran object and want to commit the edit to CSS.

Parameters:

Source: renderTransform.js

tapspace.components.Transformer:rotateBy(radians[, pivot])

Rotate the basis around z axis.

Parameters:

Returns:

Source: rotateBy.js

tapspace.components.Transformer:rotateByDegrees(degrees[, pivot])

Rotate the element by degrees around z axis of an optional pivot point.

Parameters:

Returns:

Source: rotateByDegrees.js

tapspace.components.Transformer:scaleBy(multiplier[, pivot])

Scale the element.

Parameters:

Returns:

Source: scaleBy.js

tapspace.components.Transformer:setAnchor(point)

Set the transformer anchor point. This does not move the element.

Parameters:

Returns:

Source: setAnchor.js

tapspace.components.Transformer:setBasis(basis)

Transform this element so that its position, scale, and orientation match the given basis.

Parameters:

Returns:

Aliases: tapspace.components.Transformer:transformTo

Source: setBasis.js

tapspace.components.Transformer:setOrientation(orient[, pivot])

Rotate this basis so that its orientation matches the given orientation. The rotation is performed around the given pivot point. Use to match orientation between components.

Parameters:

Returns:

Source: setOrientation.js

tapspace.components.Transformer:setScale(scale[, origin])

Dilate this basis so that its scale matches the given scale. The dilation is performed about the given origin point.

Parameters:

Returns:

Source: setScale.js

tapspace.components.Transformer:snapPixels([pivot])

Coordinates of components do not always match the pixel grid of the screen device. This causes especially rotation and non-integer translation to blur the pixels of images a bit. This blurring can be annoying if the angle is close to a 90 deg or if the content has lots of high-contrast details.

To make the images crispier and the pixels match the screen pixel grid, snapPixels method adjusts the translation and visible rotation slightly.

In order for the content of the component to match the pixel grid the content itself must have integer coordinates, integer scale, and orthogonal rotation (0, 90, 180, or 270 degrees). Use Point:round to ensure integer coordinates.

The method does not modify the true coordinates i.e. the plane transition of the plane, only the latent CSS rendered by the browser. However when snapPixels is applied to interactive planes, such as the viewport, the rounding can affect the input pointer coordinates. Therefore snapPixels should NOT be used during a gesture, but immediately after at the gesture end. Otherwise the gesture appears jittery and unpleasant.

Parameters:

Returns:

Source: snapPixels.js

tapspace.components.Transformer:transformBy(tr[, origin])

Transform (move) the basis in space. For example, imagine a transform that rotates the basis 90 degrees clockwise around z axis of the transformer anchor. If the basis was already at the angle of 45 degrees, then after the transformation, the basis is at the angle of 135 degrees.

Parameters:

Returns:

Source: transformBy.js

tapspace.components.Transformer:transformTo

Alias of tapspace.components.Transformer:setBasis

tapspace.components.Transformer:translateBy(translation)

Translate the element along x-, y-, and z-axis. Translation does not rotate or scale the element. Translation along z-axis can change the perceived size of the element.

Example:

const vec = item.atTopLeft().getVectorTo(item.atBottomRight())
plane.translateBy(vec)

Parameters:

Returns:

Source: translateBy.js

tapspace.components.Transformer:translateTo(point)

Translate the element along x-, y-, and z-axis so that its anchor matches the given point. Translation does not rotate or scale the element. Translation along z-axis can change the perceived size of the element depending on the viewport projection mode.

Parameters:

Returns:

Source: translateTo.js

tapspace.components.Transformer.dom.applyTransition(el, params)

Update transition animation properties of an element.

Parameters:

Source: applyTransition.js

tapspace.components.Viewport(element)

Inherits BlockComponent and Interactive

A view is a viewport to space. At the same time, it is a rectangular component that can be moved around in the space. Unlike other space components, viewport width height cannot be changed via Tapspace API. Instead, the size is determined by the container element and the host app CSS rules.

Parameters:

Under the hood: When the viewport is transformed, it does not move on the page. Instead, the space and its root planes are moved in opposite direction. This, combined with overflow CSS styles, creates an illusion of a viewport into space.

Contents:

Source: Viewport/index.js

tapspace.components.Viewport:addChild(space, position)

Appends a Space into the Viewport Hyperspace. The placed component becomes an immediate child of viewport’s hyperspace which means that viewport will modify the coordinate transition of the component in order to navigate the space.

The method cannot add the component as an immediate child of the Viewport because those are hard-coded and have specific responsibilities.

Parameters:

Returns:

Source: addChild.js

tapspace.components.Viewport:addControl(control, position)

Add new control to the viewport. Controls do not move with the space.

Parameters:

Returns:

Source: addControl.js

tapspace.components.Viewport:animateOnce(options)

Animate the next viewport transform.

Parameters:

Returns:

Source: animateOnce.js

tapspace.components.Viewport:atNorm(rx, ry[, rz])

Get a Point by relative coordinates.

Parameters:

Returns:

Source: atNorm.js

tapspace.components.Viewport:atPage(pageX, pageY)

Compute a point on the viewport from page coordinates. Pointer events are a common source for page coordinates.

Parameters:

Returns:

Source: atPage.js

tapspace.components.Viewport:atPageFn()

Get a function that computes a point on the viewport from page coords. Pointer events are a common source for page coordinates.

Efficency: we assume that reading values from DOM is relatively slow and that with lots of points, it is better to query DOM once and apply that to each point, than query DOM for each point separately. TODO proof the efficency

Parameters:

Returns:

Source: atPageFn.js

tapspace.components.Viewport:balanceOrientation()

Renormalize orientation. Correct rotation of the viewport to match the orientation of the content. Useful in spiral fractal navigation.

The rotation is performed about the camera position. The correction is based on the orientation of visible content and weighted by their relative apparent areas.

Returns:

Source: balanceOrientation.js

tapspace.components.Viewport:findSingular()

Find spaces with singular or near-singular scale. Singular spaces cannot be transformed reliably due to floating point overflow and underflow. Useful for detecting near-singular spaces for graceful unloading.

Returns:

Source: findSingular.js

tapspace.components.Viewport:focus(options)

Give focus to viewport. This enables keyboard navigation.

Parameters:

Returns:

Source: focus.js

tapspace.components.Viewport:getAspectRatio()

Get width to height ratio of the viewport.

Returns:

Source: getAspectRatio.js

tapspace.components.Viewport:getControls()

Returns: all control components of the viewport.

Returns:

Source: getControls.js

tapspace.components.Viewport:getHeight()

Get viewport height as a Distance.

Returns:

Source: getHeight.js

tapspace.components.Viewport:getHyperspace()

Get the hyperspace controlled by this viewport.

Returns:

Source: getHyperspace.js

tapspace.components.Viewport:getItemAt(point)

Find affine item under the given point.

Parameters:

Returns:

Source: getItemAt.js

tapspace.components.Viewport:getNavigationBasis()

The navigation basis determines the default pinch and zoom depth when the user interacts with the viewport background.

Returns:

Source: getNavigationBasis.js

tapspace.components.Viewport:getSize()

Get viewport size. The size is read from the viewport element.offsetWidth and element.offsetHeight.

Returns:

Source: getSize.js

tapspace.components.Viewport:getSpaces()

Get spaces attached to the viewport. In other words, get all children of the viewport hyperspace.

Returns:

Source: getSpaces.js

tapspace.components.Viewport:getWidth()

Get viewport width as a Distance.

Returns:

Source: getWidth.js

tapspace.components.Viewport:limitTo(targets[, options])

Zoom until the targets are at least partly visible in the viewport. Do not zoom at all if some of them are visible. Useful for preventing users from getting lost in space.

Parameters:

Returns:

Source: limitTo.js

tapspace.components.Viewport:measureAll([filter])

Compute element distances, areas, and visibility relative to the viewport. Useful of semantic zooming and other spatially triggered behavior. Computation can be computationally intensive, and therefore it is advisable to measure only occasionally or at viewport ‘idle’ event.

Example:

const measurements = view.measureAll()
measurements.forEach((measurement) => {
  const item = measurement.target
  if (measurement.areaRatio >= 0.3) {
    item.addClass('large')
  } else {
    item.removeClass('large')
  }
})

Parameters:

Returns:

Complexity:

Source: measureAll.js

tapspace.components.Viewport:measureDilation(component)

Measure dilation of the given component with respect to the viewport. In other words, get component’s scale relative to the viewport.

Parameters:

Returns:

Source: measureDilation.js

tapspace.components.Viewport:measureGroup(group[, filter])

Find distances, projected areas, and visibility data for the group and all the components within.

Example:

const measurements = view.measureGroup(space)

Parameters:

Returns:

Complexity:

Source: measureGroup.js

tapspace.components.Viewport:measureMany(components)

Measure each given component with respect to the viewport.

Example:

const items = plane.getChildren()
const measurements = view.measureMany(items)

Parameters:

Returns:

Source: measureMany.js

tapspace.components.Viewport:measureNearest(components, k[, options])

Measure K nearest of the given components.

Parameters:

Returns:

Source: measureNearest.js

tapspace.components.Viewport:measureOne(component)

Measure the given component with respect to the viewport.

Example:

const measurement = view.measureOne(item)

Parameters:

Returns:

Source: measureOne.js

tapspace.components.Viewport:moveTo(point)

Alias of tapspace.components.Viewport:translateTo

tapspace.components.Viewport:normAt(x, y)

Get normalized coordinates from a point. Practically this is the inverse of Viewport:atNorm. For example, let a viewport have size (400, 400). Then the normalized coords for the point (200, 100) are (0.5, 0.25).

Parameters:

Parameters (alternative):

Returns:

Source: normAt.js

tapspace.components.Viewport:pannable(options)

Make the viewport pannable (= draggable). The view can be moved freely by a set of pointers. The view maintains the size and the angle.

Parameters:

Parameters (alternative):

Returns:

Source: pannable.js

tapspace.components.Viewport:prependChild(space, position)

Add a Space as the first child of the Viewport Hyperspace. See also Viewport:addChild

Parameters:

Returns:

Source: prependChild.js

tapspace.components.Viewport:removeChild(space)

Remove a Component from the Viewport Hyperspace.

Parameters:

Returns:

Source: removeChild.js

tapspace.components.Viewport:removeControl(control)

Remove control from the viewport.

Parameters:

Returns:

Source: removeControl.js

tapspace.components.Viewport:renderTransform()

You should never call this method for Viewport. This method overrides Transformer:renderTransform and its sole purpose is to throw an error if accidentally called.

See also Hyperspace:renderTransform

Source: renderTransform.js

tapspace.components.Viewport:requestIdle()

Targeted for internal use.

Ask viewport to emit an idle event. The idle events are used for computationally heavy tasks. Therefore this method attempts to limit the frequency of idle events by throttling and respecting ongoing animations.

Returns:

Source: requestIdle.js

tapspace.components.Viewport:responsive([enable])

Make the viewport responsive to container size changes. A responsive viewport keeps its anchor and perspective origin at the same relative position with respect to its size.

Viewports are responsive by default. Use this method to disable or re-enable the responsivity.

Parameters:

Returns:

Source: responsive.js

tapspace.components.Viewport:rotatable(options)

Make the viewport rotatable. The viewport can be rotated by pinch gesture and mouse wheel. If a pivot point is given, a single-pointer drag gesture is enough to rotate.

Parameters:

Returns:

Source: rotatable.js

tapspace.components.Viewport:rotateBy(angle, pivot)

Rotate the viewport in space around a pivot point.

Parameters:

Returns:

Source: rotateBy.js

tapspace.components.Viewport:scaleBy(factor, pivot)

Scale the viewport in space about a pivot point. For example, the scaling by the factor of 2 doubles the viewport size and therefore makes the objects in space visually shrink to half.

Parameters:

Returns:

Source: scaleBy.js

tapspace.components.Viewport:setMeasureMode(measureMode)

A measure mode makes the viewport actively measure plane distances and areas. The act of measuring is necessary for interactions that use CameraCapturer, such as the Approach interaction.

Parameters:

Measure modes:

Returns:

Source: setMeasureMode.js

tapspace.components.Viewport:setNavigationBasis(basis)

The navigation basis determines the default pinch and zoom depth when the user interacts with the viewport background. Interactions may call this method in the beginning of interaction to lock the navigation basis for the duration of the interaction.

Parameters:

Returns:

Source: setNavigationBasis.js

tapspace.components.Viewport:setOrientation(orient[, pivot])

Rotate the viewport so that its orientation matches the given orientation. The rotation is performed around a pivot point.

Parameters:

Returns:

Source: setOrientation.js

tapspace.components.Viewport:snapPixels([pivot])

Snap viewport position and angle to pixels when the angle is near a multitude of 90 degrees. This does not modify the real position but only the appearance. See Transformer:snapPixels for details.

Parameters:

Returns:

Source: snapPixels.js

tapspace.components.Viewport:tappable(options)

Make viewport tappable i.e. make it emit tap events. See tapspace.interaction.Tap for details.

Parameters:

Parameters (alternative):

Makes the component emit events:

Returns:

Source: tappable.js

tapspace.components.Viewport:toPage(viewX, viewY)

Compute a point on the page from a point on the viewport. Practical if points need to be normalised on the page.

Parameters:

Returns:

Source: toPage.js

tapspace.components.Viewport:transformBy(tr, origin)

Overwrites Transformer:transformBy

Transform the viewport in relation to the spaces. In effect, this transforms hyperspace with the inversion of the transform.

Parameters:

Returns:

Source: transformBy.js

tapspace.components.Viewport:translateBy(translation, opts)

Translate the viewport in space along x, y, and z axis.

Parameters:

Returns:

Source: translateBy.js

tapspace.components.Viewport:translateTo(point)

Translate the viewport along x-, y-, and z-axis so that its anchor matches the given point. Translation does not rotate or rescale the view. Translation along z-axis can change the perceived size of space items depending on the viewport projection mode.

Parameters:

Returns:

Aliases: tapspace.components.Viewport:moveTo

Source: translateTo.js

tapspace.components.Viewport:zoomTo(frame[, options])

Translate, rotate, and scale the viewport to display the given frame. You may specify margin to control how much room to leave around the frame.

Parameters:

Returns:

Source: zoomTo.js

tapspace.components.Viewport:zoomToFill(target[, ratio])

Translate and scale the viewport so that it fully contains the target. In other words, transform so that the target fits inside the viewport. See Viewport:zoomToFit to fully fit the viewport inside a target.

Parameters:

Returns:

Source: zoomToFill.js

tapspace.components.Viewport:zoomToFit(target[, ratio])

Translate and scale the viewport so that it fully fits inside the target. In other words, transform so that the target fills the viewport entirely. See Viewport:zoomToFill to fully fit a target inside the viewport.

Parameters:

Returns:

Source: zoomToFit.js

tapspace.components.Viewport:zoomable(options)

Make the viewport zoomable.

The viewport can be zoomed by pinch gesture, mouse wheel, and some keyboard keys (+/-).

Use options to control which zoom interactions to enable.

Optionally you can set a pivot point, that forces the zoom and pan navigation always be fixed onto the pivot point.

Example:

const view = tapspace.createView('#myspace')
view.zoomable()

Parameters:

Parameters (alternative):

Returns:

Source: zoomable.js

tapspace.components.Viewport.create

Alias of tapspace.createView

tapspace.components.ViewportControl(element)

Inherits FrameComponent

Base class for viewport control areas.

Parameters:

Contents:

Source: ViewportControl/index.js

tapspace.components.ViewportControls()

Inherits Component

A container for viewport controls. Designed to be used internally by Viewport. Cannot be moved.

Contents:

Source: ViewportControls/index.js

tapspace.components.ViewportControls:adapt(resizeEvent)

This method receives a ResizeEvent from the ResizeCapturer and adjusts the controls so that they stay at the same distance from their associated corner of the viewport. Useful when the viewport size changes.

Parameters:

Returns:

Source: adapt.js

tapspace.components.ZoomControl(options)

Inherits ViewportControl

This control provides basic +/- buttons to zoom the viewport in and out.

Parameters:

Styling:

Contents:

Source: ZoomControl/index.js

tapspace.components.ZoomControl:bind(viewport)

Bind button actions to the viewport. In other words, this registers the viewport for the buttons.

Source: ZoomControl/index.js

tapspace.components.ZoomControl:unbind()

Unbind button actions

Source: ZoomControl/index.js

tapspace.createControl(content)

Create a viewport control with custom HTML content. Useful for logos, search, and legal text.

Parameters:

Returns:

Aliases: tapspace.components.CustomControl.create

Source: create.js

tapspace.createItem(content)

Make an affine item from HTML content. Wraps the content inside a div.

Parameters:

Returns:

Source: create.js

tapspace.createNode(radius)

Make a circle-shaped element.

Parameters:

Returns:

Source: create.js

tapspace.createSpace()

Create a container for items and other spaces.

Returns:

Aliases: tapspace.components.Space.create

Source: create.js

tapspace.createView(element)

Create a Viewport from an HTMLElement. The viewport provides means to display and navigate one or many Space components and their contents. Internally Viewport maintains an hyperspace with a floating origin in order to handle numeric over- and underflows between remote spaces.

Example:

const view = tapspace.createView('#tapspace')
const space = tapspace.createSpace()
view.addSpace(space, view.atCenter())

Parameters:

Returns:

Aliases: tapspace.components.Viewport.create

Source: create.js

tapspace.effects

Effects are animations that can be triggered programmatically for example as part of interaction.

Contents:

Source: effects/index.js

tapspace.effects.press

Pressing effect: the element moves down a bit and then back up.

Parameters:

Source: press/index.js

tapspace.geometry

Tensor geometry for the affine 3D space. Each geometry class implements a tensor that helps the programmer to care less about coordinate basis and numeric representation. Tensors make it easy to do layouts and move components and geometry. They kind of float in space relative to each other without absolute origin.

Unlike components, the geometry classes are immutable meaning that their state does not change. Instead, new objects are returned. For example, vec.rotateBy(PI) does not change vec but returns a new rotated vector.

Geometry classes differ from components also in the aspect that they are virtual, meaning that they do not have HTML representation and do not occupy DOM.

Each geometry has changeBasis(…) method for recomputing the interal raw numeric representation for the basis of another component. The raw value can be exposed by getRaw() and transitRaw(…) methods.

The basis changes of the geometry are passive transformations in a sense that they do not change the geometry, only the frame of reference.

An example of an active transformation is the Transform class which can be used to move both geometry and components around. Many geometry classes also provide methods to move i.e. actively transform them in various ways like rotateBy(radians, origin). See also offset(..,), scaleBy(…) and translateBy(…).

Contents:

Source: geometry/index.js

tapspace.geometry.Area(basis, area)

An area in space. Always zero or positive. Will behave like an area when a coordinate transition changes the scale of the reference frame.

Parameters:

Contents:

Source: Area/index.js

tapspace.geometry.Area:changeBasis(newBasis)

The basis change of area changes the basis and represents the same area in the target basis. Only change in scale affects the representation.

Parameters:

Returns:

Source: changeBasis.js

tapspace.geometry.Area:getRaw()

Returns: plain area as a number without basis data.

Source: getRaw.js

tapspace.geometry.Area:projectTo(plane, camera)

Project the area measure onto a plane. Can be used for measuring item’s apparent area on viewport, for example.

Parameters:

Returns:

Source: projectTo.js

tapspace.geometry.Area:transitRaw(newBasis)

Represent the area in another basis. Unlike changeBasis, returns a plain number without basis data.

Parameters:

Returns:

Source: transitRaw.js

tapspace.geometry.Basis(basis, transition)

A virtual basis in space, a basis tensor. This helps you to represent a basis in space regardless the coordinate system of the reference element. For example, affine elements can be transformed to match the scale, orientation, and position of a virtual basis.

Parameters:

Contents:

Source: Basis/index.js

tapspace.geometry.Basis:at(x, y, z)

Get a point using the internal coordinates of the basis.

Parameters:

Returns:

Aliases: tapspace.geometry.Basis:getPoint

Source: at.js

tapspace.geometry.Basis:changeBasis(newBasis)

Transit the virtual basis to another element basis. In other words, represent the same basis in the coordinate system of the given element basis.

Parameters:

Returns:

Source: changeBasis.js

tapspace.geometry.Basis:createDirection(theta[, phi])

Create a direction tensor from spherical coordinates using the coordinate system of this basis.

Parameters:

Returns:

Source: createDirection.js

tapspace.geometry.Basis:createDistance(d)

Get a distance on the virtual basis.

Parameters:

Returns:

Source: createDistance.js

tapspace.geometry.Basis:createVector(x, y[, z])

Create a vector using coordinate system of this basis.

Parameters:

Returns:

Source: createVector.js

tapspace.geometry.Basis:getMatchedOuter(targetBasis)

Get a basis that would represent the placement of the element basis, if we transformed the element so that this basis and the target basis match. Useful when you want to get a basis for a yet unpositioned element and you know a basis relative to that element and you also know where that basis should be space. Then the resulting basis is the basis to which you should move the element. See also Transformer:matchBasis

Parameters:

Returns:

Source: getMatchedOuter.js

tapspace.geometry.Basis:getOrientation()

Get the orientation of this virtual basis. Provides a way to match the orientation between components and geometry.

Example:

> const orient = item.getBasis().rotateByDegrees(45).getOrientation()
> anotherItem.setOrientation(orient)

Returns:

Source: getOrientation.js

tapspace.geometry.Basis:getPoint

Alias of tapspace.geometry.Basis:at

tapspace.geometry.Basis:getRaw()

Returns: plain plane3 object { a, b, x, y, z } without element basis.

Source: getRaw.js

tapspace.geometry.Basis:getScale()

Get the scale of this virtual basis. Provides a way to measure and match the scale between components and geometry.

Returns:

Source: getScale.js

tapspace.geometry.Basis:getTransformTo(b)

Get a transform from this to the basis b. The resulting transformation would transform this basis to the given basis when applied to the origin.

Parameters:

Returns:

Source: getTransformTo.js

tapspace.geometry.Basis:innerOffset

Alias of tapspace.geometry.Basis:offset

tapspace.geometry.Basis:offset(dx, dy[, dz])

Create a translated basis. The offset parameters follow the inner basis orientation. Useful for changing basis origin towards an anchor for example. To offset by using the current element coordinate system, see Basis:outerOffset

Parameters:

Returns:

Aliases: tapspace.geometry.Basis:innerOffset

Source: offset.js

tapspace.geometry.Basis:outerOffset(dx, dy[, dz])

Create a translated basis based on the element orientation. In other words, the offset parameters follow the element coordinate system. Note that usually you want to depend on the basis orientation, not the element orientation, because the same basis can be represented on any affine element but elements just are where they are. See Basis:offset to offset using the inner basis orientation.

Parameters:

Returns:

Source: outerOffset.js

tapspace.geometry.Basis:polarOffset(distance, direction)

Get another basis translated by distance and direction.

Parameters:

Returns:

Source: polarOffset.js

tapspace.geometry.Basis:rotateBy(radians, origin)

Rotate the basis around an origin point on xy-plane.

Parameters:

Returns:

Source: rotateBy.js

tapspace.geometry.Basis:rotateByDegrees(degrees[, origin])

Rotate the basis around the z-axis that intersects the origin point.

Parameters:

Returns:

Source: rotateByDegrees.js

tapspace.geometry.Basis:scaleBy(multiplier, origin)

Scale the basis about an origin point.

Parameters:

Returns:

Source: scaleBy.js

tapspace.geometry.Basis:transformBy(tr, origin)

Transform the virtual basis by a transformation at origin.

Parameters:

Returns:

Source: transformBy.js

tapspace.geometry.Basis:transitRaw(newBasis)

Represent the virtual basis on another element basis. Unlike changeBasis, returns a plain object without element basis.

Parameters:

Returns:

Source: transitRaw.js

tapspace.geometry.Basis:transitRawOuter(basis)

Represent the virtual basis on the parent of the element basis. Unlike changeBasis, returns a plain object without the element basis. This corresponds to Basis:changeBasis(basis.getParent()).getRaw() but is more efficient and does not require the parent to exist.

Parameters:

Returns:

Source: transitRawOuter.js

tapspace.geometry.Basis:translateBy(vec)

Translate the virtual basis by a vector.

Parameters:

Returns:

Source: translateBy.js

tapspace.geometry.Basis.fromPoints(basis, origin, unit)

Parameters:

Returns:

Source: fromPoints.js

tapspace.geometry.Box(basis, box)

A rectangular box in space. Basically it is three-dimensional cuboid that has two faces parallel to xy-plane. A box has basis in space and a position, orientation, and size in that basis. In a way the box has two bases, the basis in space and its placement basis respective of the basis in space. This is necessary in order to represent the box in any basis, not only those that have same orientation.

Parameters:

Contents:

Source: Box/index.js

tapspace.geometry.Box:at(x, y[, z])

Get a point using the internal coordinates of the box.

Parameters:

Returns:

Aliases: tapspace.geometry.Box:getPoint

Source: at.js

tapspace.geometry.Box:atCenter()

Get the center point of the box.

Returns:

Aliases: tapspace.geometry.Box:atMid

Source: atCenter.js

tapspace.geometry.Box:atMid()

Alias of tapspace.geometry.Box:atCenter

tapspace.geometry.Box:atNorm(nx, ny[, nz])

Get a point using the internal size-normalized coordinates of the box. The normalized point (0,0,0) means the front top left corner, and the normalized point (1,1,1) means the back bottom right corner.

Parameters:

Returns:

Source: atNorm.js

tapspace.geometry.Box:changeBasis(newBasis)

Transit the box to another basis. In other words, represent the same box in the coordinate system of the given basis.

Parameters:

Returns:

Source: changeBasis.js

tapspace.geometry.Box:detectCollision(geometry)

Check if the box collides with the given geometry. Note that not all geometries are supported, see below.

Parameters:

Returns:

Source: detectCollision.js

tapspace.geometry.Box:fromBoxes(basis, boxes)

Find the bounding box for the given set of boxes. The bounding box has the orientation of the given basis. Empty array will return zero-size box at origin.

Parameters:

Returns:

Source: fromBoxes.js

tapspace.geometry.Box:fromPoints(basis, points)

Find the bounding box for the given set of points. The bounding box has the orientation of the given basis. Empty array will return zero-size box at origin.

Parameters:

Returns:

Source: fromPoints.js

tapspace.geometry.Box:getArea()

Get the area of the front face of the box.

Returns:

Source: getArea.js

tapspace.geometry.Box:getBoundingBox([orientation])

Get the boundary of the box. The boundary is another box that has the given orientation.

Parameters:

Returns:

Source: getBoundingBox.js

tapspace.geometry.Box:getBoundingCircle()

Get the circle boundary of the rectangular box front. The circle center equals the box front center.

Returns:

Source: getBoundingCircle.js

tapspace.geometry.Box:getBoundingSphere()

Get the spherical boundary of the box. The sphere center equals the box center.

Returns:

Source: getBoundingSphere.js

tapspace.geometry.Box:getDepth()

Get box depth as a distance.

Returns:

Source: getDepth.js

tapspace.geometry.Box:getDiagonal()

Get box diagonal as a distance.

Returns:

Source: getDiagonal.js

tapspace.geometry.Box:getHeight()

Get box height as a distance.

Returns:

Source: getHeight.js

tapspace.geometry.Box:getInnerSquare()

Get the largest square inside the box that has the same center point. Useful for computing areas based on the shortest box dimension.

Returns:

Source: getInnerSquare.js

tapspace.geometry.Box:getPoint

Alias of tapspace.geometry.Box:at

tapspace.geometry.Box:getRaw()

Returns: plain box3 object { a, b, x, y, z, w, h, d } without basis data.

Source: getRaw.js

tapspace.geometry.Box:getSize()

Get box dimensions.

Returns:

Source: getSize.js

tapspace.geometry.Box:getVolume()

Get the volume of the box.

Returns:

Source: getVolume.js

tapspace.geometry.Box:getWidth()

Get box width as a distance.

Returns:

Source: getWidth.js

tapspace.geometry.Box:normAt(x, y[, z])

Get normalized coords of the point (x,y,z) with respect to the box size. For example, norm coords of the point (2, 1) in a box of size (4, 4) are (0.5, 0.25).

Parameters:

Parameters (alternative):

Returns:

Source: normAt.js

tapspace.geometry.Box:projectTo(plane, camera)

Project the box front face onto a plane.

Parameters:

Returns:

Source: projectTo.js

tapspace.geometry.Box:resizeTo(size, origin)

Resize the box to given size by keeping the origin fixed.

Parameters:

Returns:

Source: resizeTo.js

tapspace.geometry.Box:rotateBy(radians, origin)

Rotate the box around an origin point.

Parameters:

Returns:

Source: rotateBy.js

tapspace.geometry.Box:scaleBy(multiplier, origin)

Scale the box about an origin point.

Parameters:

Returns:

Source: scaleBy.js

tapspace.geometry.Box:transitRaw(newBasis)

Represent the box in another basis. Unlike changeBasis, returns a plain object without basis data.

Parameters:

Returns:

Source: transitRaw.js

tapspace.geometry.Box:translateBy(vec)

Translate the box by a vector.

Parameters:

Returns:

Source: translateBy.js

tapspace.geometry.Circle(basis, circle)

A circle tensor. The circle is a flat round shape in 3D space.

Parameters:

Contents:

Source: Circle/index.js

tapspace.geometry.Circle:atArc(dir)

Get a point at the circle perimeter at the given direction.

Parameters:

Returns:

Source: atArc.js

tapspace.geometry.Circle:atCenter()

Get the center point of the circle.

Returns:

Aliases: tapspace.geometry.Circle:atMid

Source: atCenter.js

tapspace.geometry.Circle:atMid()

Alias of tapspace.geometry.Circle:atCenter

tapspace.geometry.Circle:changeBasis(newBasis)

Transit the circle to another basis. In other words, represent the same geometry in the coordinate system of the given basis.

Parameters:

Returns:

Source: changeBasis.js

tapspace.geometry.Circle:detectCollision(geometry)

Check if the circle collides with the given geometry. The collision check does not consider z coordinates. Note that not all geometries are supported, see below.

Parameters:

Returns:

Source: detectCollision.js

tapspace.geometry.Circle:fromPoints(basis, points)

Find an approximate bounding circle for the given set of points. Reads only x and y. The circle has z coordinate at the basis origin. The circle contains all the points but can be larger than minimal. Empty array will return zero-size circle at origin.

Parameters:

Returns:

Source: fromPoints.js

tapspace.geometry.Circle:getArea()

Get the area of the circle.

Returns:

Source: getArea.js

tapspace.geometry.Circle:getBoundingBox([basis])

Get the cuboid boundary of the circle. The boundary is a box that has the same orientation as the given basis.

Parameters:

Returns:

Source: getBoundingBox.js

tapspace.geometry.Circle:getCollisionArea(geometry)

Compute overlapping area of the circle and the given geometry. Note that not all geometries are supported, see below.

Parameters:

Returns:

Source: getCollisionArea.js

tapspace.geometry.Circle:getDiameter()

Get circle diameter as a distance. The diameter equals the circle width, height, and depth.

Returns:

Aliases: tapspace.geometry.Circle:getHeight, tapspace.geometry.Circle:getWidth

Source: getDiameter.js

tapspace.geometry.Circle:getHeight

Alias of tapspace.geometry.Circle:getDiameter

tapspace.geometry.Circle:getRadius()

Get radius as a distance.

Returns:

Source: getRadius.js

tapspace.geometry.Circle:getRaw()

Returns: plain circle3 object { x, y, z, r } without basis data.

Source: getRaw.js

tapspace.geometry.Circle:getSize()

Get circle dimensions.

Returns:

Source: getSize.js

tapspace.geometry.Circle:getWidth

Alias of tapspace.geometry.Circle:getDiameter

tapspace.geometry.Circle:offset(dx, dy[, dz])

Translate the circle by scalars.

Parameters:

Returns:

Source: offset.js

tapspace.geometry.Circle:scaleBy(multiplier, origin)

Scale the circle about an origin point.

Parameters:

Returns:

Source: scaleBy.js

tapspace.geometry.Circle:transitRaw(newBasis)

Represent the circle in another basis. Unlike changeBasis, returns a plain object without basis data.

Parameters:

Returns:

Source: transitRaw.js

tapspace.geometry.Circle:translateBy(vec)

Translate the circle by a vector.

Parameters:

Returns:

Source: translateBy.js

tapspace.geometry.Direction(basis, vec)

Direction in 3D space, modeled as a unit vector.

The values of the direction depend on the orientation of the coordinate space and therefore they need conversion when transited between planes. Direction models a passive shape in space. Its active variant is Rotation.

Parameters:

Contents:

Source: Direction/index.js

tapspace.geometry.Direction:basis

Property for the basis component. Usage: dir.basis.

Source: Direction/index.js

tapspace.geometry.Direction:changeBasis(newBasis)

Parameters:

Returns:

Source: changeBasis.js

tapspace.geometry.Direction:dir

Property for the unit vector, affineplane.dir3. Usage: dir.dir.

Source: Direction/index.js

tapspace.geometry.Direction:fromSpherical(basis, theta, phi)

Create a direction from spherical coordinates.

Parameters:

Returns:

Source: fromSpherical.js

tapspace.geometry.Direction:fromVector(basis, vec)

Create a Direction from a vector.

Parameters:

Returns:

Source: fromVector.js

tapspace.geometry.Direction:getRaw()

Returns: plain dir3 object {x,y,z} without basis data.

Source: getRaw.js

tapspace.geometry.Direction:getVector(magnitude)

Create a vector from direction by giving it a length.

Parameters:

Returns:

Source: getVector.js

tapspace.geometry.Direction:transitRaw(newBasis)

Represent the direction in another basis. Unlike changeBasis, returns a plain object without basis data.

Parameters:

Returns:

Source: transitRaw.js

tapspace.geometry.Distance(basis, dist)

Distance represents a scalar measure in affine space. In coordinate system transitions, rotations and translations do not affect the distance. Only the scale does.

Parameters:

Properties:

Contents:

Source: Distance/index.js

tapspace.geometry.Distance:changeBasis(newBasis)

Parameters:

Returns:

Source: changeBasis.js

tapspace.geometry.Distance:getNumber()

Get the distance as a number on this basis.

Returns:

Source: getNumber.js

tapspace.geometry.Distance:getRaw()

Returns:

Source: getRaw.js

tapspace.geometry.Distance:getVector(dir)

Parameters:

Returns:

Source: getVector.js

tapspace.geometry.Distance:isAlmostEqual(distance[, tolerance])

Test if two distances are equal within tolerance. The changes in basis often cause small rounding errors due to floating point arithmetics and those can break strict equality checks.

Parameters:

Returns:

Source: isAlmostEqual.js

tapspace.geometry.Distance:isGreaterThan(distance)

Test if this is greater than the given distance.

Parameters:

Returns:

Source: isGreaterThan.js

tapspace.geometry.Distance:isLessThan(distance)

Test if this is less than the given distance.

Parameters:

Returns:

Source: isLessThan.js

tapspace.geometry.Distance:max(distance)

Returns: maximum of the two distances.

Parameters:

Returns:

Source: max.js

tapspace.geometry.Distance:min(distance)

Returns: minimum of the two distances.

Parameters:

Returns:

Source: min.js

tapspace.geometry.Distance:multiply

Alias of tapspace.geometry.Distance:scaleBy

tapspace.geometry.Distance:projectTo(plane, camera)

Project the distance onto a plane. The projection tells how long the distance is when viewed from the camera. We assume the distance to have same orientation as its basis. Both the scale difference and z difference affect the result.

Parameters:

Returns:

Source: projectTo.js

tapspace.geometry.Distance:scaleBy(multiplier)

Multiply the distance. Returns new Distance.

Parameters:

Returns:

Aliases: tapspace.geometry.Distance:multiply

Source: scaleBy.js

tapspace.geometry.Distance:transitRaw(newBasis)

Represent the distance in another basis. Unlike changeBasis, returns a plain object without basis data.

Parameters:

Returns:

Source: transitRaw.js

tapspace.geometry.Line(basis, line)

A line tensor. The line extends to infinity in two directions.

Parameters:

Source: Line/index.js

tapspace.geometry.Orientation(basis, orient)

Orientation in 3D space, but limited to rotations around z-axis (for now).

The values of the orientation depend on the orientation of the coordinate space and therefore they need conversion when transited between bases. Orientation is a passive state in space. Its active variant is Rotation.

Parameters:

Contents:

Source: Orientation/index.js

tapspace.geometry.Orientation:basis

Property of orientation, a Component. Usage: orientation.basis.

Source: Orientation/index.js

tapspace.geometry.Orientation:changeBasis(newBasis)

Parameters:

Returns:

Source: changeBasis.js

tapspace.geometry.Orientation:getRaw()

Returns: plain orient2 object {a,b} without basis data.

Source: getRaw.js

tapspace.geometry.Orientation:orient

Property of orientation, affineplane.orient2. Usage: orientation.orient.

Source: Orientation/index.js

tapspace.geometry.Orientation:transitRaw(newBasis)

Represent the orientation in another basis. Unlike changeBasis, returns a plain object without basis data.

Parameters:

Returns:

Source: transitRaw.js

tapspace.geometry.Orientation:transitRawOuter(basis)

Represent the orientation in the outer basis of the given component. Unlike changeBasis, returns a plain object without basis data. See Point:transitRawOuter for details.

Parameters:

Returns:

Source: transitRawOuter.js

tapspace.geometry.Orientation.fromVectorBasis(basis, xAxis)

Construct an orientation from basis vectors. For now, x-axis is enough to determine orientation around z-axis.

Parameters:

Returns:

Source: fromVectorBasis.js

tapspace.geometry.Orientation.getUnitX()

Get a unit vector along the x-axis of the orientation.

Returns:

Source: getUnitX.js

tapspace.geometry.Orientation.getUnitY()

Get a unit vector along the y-axis of the orientation.

Returns:

Source: getUnitY.js

tapspace.geometry.Orientation.getUnitY()

Get a unit vector along the z-axis of the orientation.

Returns:

Source: getUnitZ.js

tapspace.geometry.Path(basis, points)

A sequence of Points in 3D space.

Example:

let pa = new tapspace.geometry.Path(basis, [
  { x: 0, y: 1, z: 2 },
  { x: 1, y: 2, z: 3 },
])

Parameters:

Contents:

Source: Path/index.js

tapspace.geometry.Path:changeBasis(newBasis)

Transit the path to another coordinate basis.

Parameters:

Returns:

Source: changeBasis.js

tapspace.geometry.Path:getRaw()

Returns: plain path3 object without basis data.

Source: getRaw.js

tapspace.geometry.Path:transitRaw(newBasis)

Represent the path in another basis. Unlike changeBasis, returns a plain object without basis data.

Parameters:

Returns:

Source: transitRaw.js

tapspace.geometry.Point(basis, point)

A 3D point in a space. This can also be called a 3D position vector. See Vector for a 3D displacement vector.

Example:

let p = new tapspace.geometry.Point(basis, { x: 1, y: 2, z: 3 })

Parameters:

Contents:

Source: Point/index.js

tapspace.geometry.Point:addVector(vec)

Translate the point by a vector.

Parameters:

Returns:

Source: addVector.js

tapspace.geometry.Point:changeBasis(newBasis)

Parameters:

Returns:

Source: changeBasis.js

tapspace.geometry.Point:getDirectionTo(p)

Direction from this point to another.

Parameters:

Returns:

Source: getDirectionTo.js

tapspace.geometry.Point:getDistanceTo(p)

Distance between points.

Parameters:

Returns:

Source: getDistanceTo.js

tapspace.geometry.Point:getRaw()

Returns: plain point3 object {x,y,z} without basis data.

Source: getRaw.js

tapspace.geometry.Point:getVectorTo(p)

Get a vector from this to the point p.

Parameters:

Returns:

Source: getVectorTo.js

tapspace.geometry.Point:homothety(factor, origin)

Get a point when the current point distance from the origin is multiplied by the given factor.

Parameters:

Returns:

Source: homothety.js

tapspace.geometry.Point:offset(dx, dy, dz)

Get a point when the current point is offset by dx, dy, and dz, on the current basis.

Parameters:

Returns:

Source: offset.js

tapspace.geometry.Point:polarOffset(distance, direction)

Get the point at the given distance and direction.

Parameters:

Returns:

Source: polarOffset.js

tapspace.geometry.Point:projectTo(plane, camera)

Project the point onto a plane.

Parameters:

Returns:

Source: projectTo.js

tapspace.geometry.Point:round()

Round the point to nearest integers.

Returns:

Source: round.js

tapspace.geometry.Point:transformBy(tr, origin)

Transform the point by helmert transformation. This can rotate and scale the point about another origin point and translate it.

Parameters:

Returns:

Source: transformBy.js

tapspace.geometry.Point:transitRaw(newBasis)

Represent the point in another basis. Unlike changeBasis, returns a plain object without basis data.

Parameters:

Returns:

Source: transitRaw.js

tapspace.geometry.Point:transitRawOuter(basis)

Represent the point in the outer basis of the element. Unlike changeBasis, returns a plain object without basis data. This corresponds to Point:changeBasis(basis.getParent()).getRaw() but is more efficient and does not require the affine parent to exist.

Parameters:

Returns:

Source: transitRawOuter.js

tapspace.geometry.Point:translateBy(vec)

Get a point that has been translated i.e. offset by the given vector.

Parameters:

Returns:

Source: translateBy.js

tapspace.geometry.Point.fromAverage(basis, points)

Mean of an array of points.

Parameters:

Returns:

Example:

const mean = tapspace.Point.fromAverage(basis, points)

Aliases: tapspace.geometry.Point.fromMean

Source: fromAverage.js

tapspace.geometry.Point.fromMean

Alias of tapspace.geometry.Point.fromAverage

tapspace.geometry.Ray(basis, ray)

A ray tensor. The ray is like a line but extends to infinity only at one direction.

Parameters:

Contents:

Source: Ray/index.js

tapspace.geometry.Ray:at(t)

Get a point along the ray. The ray spanning vector defines the unit length. Negative values default to the ray origin point.

Parameters:

Returns:

Aliases: tapspace.geometry.Ray:getPoint

Source: at.js

tapspace.geometry.Ray:getDistanceToPoint(point)

Compute shortest distance between the ray and the given point.

Parameters:

Returns:

Source: getDistanceToPoint.js

tapspace.geometry.Ray:getPoint

Alias of tapspace.geometry.Ray:at

tapspace.geometry.Ray.create(basis, origin, span)

Parameters:

Returns:

Source: create.js

tapspace.geometry.Scale(basis, multiplier)

The scale in space. The scale depends on the scale of the coordinate space and therefore needs conversion between planes.

In contrast, a scaling aka dilation is not the same as the scale. Dilation is a change in the scale, for example doubling, and therefore does not depend on the plane.

Parameters:

Contents:

Source: Scale/index.js

tapspace.geometry.Scale:changeBasis(newBasis)

Represent the scale in another coordinate basis.

Parameters:

Returns:

Source: changeBasis.js

tapspace.geometry.Scale:getRaw()

Returns: plain scale multiplier as a number without basis data.

Source: getRaw.js

tapspace.geometry.Scale:scaleBy(multiplier)

Multiply the scale. Returns new Scale.

Parameters:

Returns:

Source: scaleBy.js

tapspace.geometry.Scale:transitRaw(newBasis)

Represent the scale in another basis. Unlike changeBasis, returns a plain number without basis data.

Parameters:

Returns:

Source: transitRaw.js

tapspace.geometry.Scale:transitRawOuter(basis)

Represent the scale in the outer basis of the component. Unlike changeBasis, returns a plain number without basis data. See Point:transitRawOuter for details.

Parameters:

Returns:

Source: transitRawOuter.js

tapspace.geometry.Size(basis, size)

A cuboid size in space. Basically it is three-dimensional distance. If you need to represent a rectangular or cuboid shape in space, use Path, Polygon, or Box instead as they can be reliably transited between bases.

Parameters:

Contents:

Source: Size/index.js

tapspace.geometry.Size:changeBasis(newBasis)

The basis change of size does not preserve direction except when the bases have same orientation. Rotation cannot be applied to size.

Parameters:

Returns:

Source: changeBasis.js

tapspace.geometry.Size:getArea()

Get the area of the size.

Returns:

Source: getArea.js

tapspace.geometry.Size:getRaw()

Returns: plain size3 object { w, h, d } without basis data.

Source: getRaw.js

tapspace.geometry.Size:normAt(x, y[, z])

Get normalized coords of the point (x,y,z) with respect to the size. For example, norm coords of the point (2, 1) in a size (4, 4) are (0.5, 0.25).

Parameters:

Returns:

Source: normAt.js

tapspace.geometry.Size:scaleBy(multiplier)

Multiply the size.

Parameters:

Returns:

Source: scaleBy.js

tapspace.geometry.Size:transitRaw(newBasis)

Represent the size in another basis. Unlike changeBasis, returns a plain object without basis data.

Parameters:

Returns:

Source: transitRaw.js

tapspace.geometry.Sphere(basis, sphere)

A sphere in space. A sphere has origin point and a radius. Spheres do not have orientation and therefore lack the at() method for example.

Parameters:

Contents:

Source: Sphere/index.js

tapspace.geometry.Sphere:atCenter()

Get the center point of the sphere.

Returns:

Aliases: tapspace.geometry.Sphere:atMid

Source: atCenter.js

tapspace.geometry.Sphere:atMid()

Alias of tapspace.geometry.Sphere:atCenter

tapspace.geometry.Sphere:changeBasis(newBasis)

Transit the sphere to another basis. In other words, represent the same geometry in the coordinate system of the given basis.

Parameters:

Returns:

Source: changeBasis.js

tapspace.geometry.Sphere:detectCollision(geometry)

Check if the sphere collides with the given geometry. Note that not all geometries are supported, see below.

Parameters:

Returns:

Source: detectCollision.js

tapspace.geometry.Sphere:fromPoints(basis, points)

Find an approximate bounding sphere for the given set of points. The sphere contains all the points but can be larger than minimal. Empty array will return zero-size sphere at origin.

Parameters:

Returns:

Source: fromPoints.js

tapspace.geometry.Sphere:getBoundingBox([basis])

Get the cuboid boundary of the sphere. The boundary is a box that has the same orientation as the given basis.

Parameters:

Returns:

Source: getBoundingBox.js

tapspace.geometry.Sphere:getDepth

Alias of tapspace.geometry.Sphere:getDiameter

tapspace.geometry.Sphere:getDiameter()

Get sphere diameter as a distance. The diameter equals the sphere width, height, and depth.

Returns:

Aliases: tapspace.geometry.Sphere:getDepth, tapspace.geometry.Sphere:getHeight, tapspace.geometry.Sphere:getWidth

Source: getDiameter.js

tapspace.geometry.Sphere:getHeight

Alias of tapspace.geometry.Sphere:getDiameter

tapspace.geometry.Sphere:getRadius()

Get sphere radius as a distance.

Returns:

Source: getRadius.js

tapspace.geometry.Sphere:getRaw()

Returns: plain sphere3 object { x, y, z, r } without basis data.

Source: getRaw.js

tapspace.geometry.Sphere:getSize()

Get sphere dimensions.

Returns:

Source: getSize.js

tapspace.geometry.Sphere:getVolume()

Get the volume of the sphere.

Returns:

Source: getVolume.js

tapspace.geometry.Sphere:getWidth

Alias of tapspace.geometry.Sphere:getDiameter

tapspace.geometry.Sphere:offset(dx, dy[, dz])

Translate the sphere by scalars.

Parameters:

Returns:

Source: offset.js

tapspace.geometry.Sphere:scaleBy(multiplier, origin)

Scale the sphere about an origin point.

Parameters:

Returns:

Source: scaleBy.js

tapspace.geometry.Sphere:transitRaw(newBasis)

Represent the sphere in another basis. Unlike changeBasis, returns a plain object without basis data.

Parameters:

Returns:

Source: transitRaw.js

tapspace.geometry.Sphere:translateBy(vec)

Translate the sphere by a vector.

Parameters:

Returns:

Source: translateBy.js

tapspace.geometry.Transform(basis, helmert)

The Transform models rotations on xy-plane, uniform scalings and translations in xyz-space. The Transform also has a reference to its element basis which allows us to represent the transform on other elements when needed. The Transform is a compact special case of a Helmert transformation, and more generally, a special case of a homogeneous (aka augmented) 4x4 transform matrix for 3D space.

Parameters:

Properties:

Contents:

Source: Transform/index.js

tapspace.geometry.Transform:changeBasis(newBasis)

Represent the transform on another plane.

Parameters:

Returns:

Source: changeBasis.js

tapspace.geometry.Transform:fromFeatures(params)

Create transform in intuitive way from human-readable parameters.

Parameters:

Returns:

Source: fromFeatures.js

tapspace.geometry.Transform:getRaw()

Returns: plain helm3 object {a,b,x,y,z} without basis data.

Source: getRaw.js

tapspace.geometry.Transform:getRotation()

Get the rotating component of the transform without translation and scaling.

Returns:

Source: getRotation.js

tapspace.geometry.Transform:getTranslation()

Get the translation component of the transform without rotation and scaling.

Returns:

Source: getTranslation.js

tapspace.geometry.Transform:getVector()

Get the translation component of the transform as a Vector.

Returns:

Source: getVector.js

tapspace.geometry.Transform:inverse

Alias of tapspace.geometry.Transform:invert

tapspace.geometry.Transform:invert()

Invert the transform.

Returns:

Aliases: tapspace.geometry.Transform:inverse

Source: inverse.js

tapspace.geometry.Transform:transitRaw(newBasis)

Represent the transform in another basis. Unlike changeBasis, returns a plain object without basis data.

Parameters:

Returns:

Source: transitRaw.js

tapspace.geometry.Vector(basis, vec)

Creates a vector that can be transited between bases. The vector has length and direction but no position.

Parameters:

Contents:

Source: Vector/index.js

tapspace.geometry.Vector:add(vec)

Vector addition, this plus the given vector.

Parameters:

Returns:

Source: add.js

tapspace.geometry.Vector:almostEqual(vec[, tolerance])

Test if vectors are almost equal.

Parameters:

Returns:

Source: almostEqual.js

tapspace.geometry.Vector:changeBasis(newBasis)

Represent the vector in another basis. Note that vectors are only affected by scale and angle differences between bases.

Parameters:

Returns:

Source: changeBasis.js

tapspace.geometry.Vector:copy()

Clone the vector.

Returns:

Source: copy.js

tapspace.geometry.Vector:cross(vec)

Get cross product with another vector.

Parameters:

Returns:

Source: cross.js

tapspace.geometry.Vector:difference(vec)

Vector subtraction, this minus the given vector.

Parameters:

Returns:

Aliases: tapspace.geometry.Vector:subtract

Source: difference.js

tapspace.geometry.Vector:dot(vec)

Get dot product with another vector.

Parameters:

Returns:

Source: dot.js

tapspace.geometry.Vector:getDirection()

Get vector direction.

Returns:

Source: getDirection.js

tapspace.geometry.Vector:getDistance()

Get vector norm as a Distance.

Returns:

Aliases: tapspace.geometry.Vector:norm

Source: getDistance.js

tapspace.geometry.Vector:getRaw()

Returns: plain vec3 object {x,y,z} without basis data.

Source: getRaw.js

tapspace.geometry.Vector:negate()

Get same vector but in opposite direction.

Returns:

Source: negate.js

tapspace.geometry.Vector:norm

Alias of tapspace.geometry.Vector:getDistance

tapspace.geometry.Vector:normalize([magnitude])

Scale the vector uniformly so that its length becomes the given optional magnitude, 1 by default.

Parameters:

Returns:

Aliases: tapspace.geometry.Vector:scaleTo

Source: normalize.js

tapspace.geometry.Vector:rotateBy(roll[, pitch])

Rotate the vector. The vector magnitude stays the same.

Parameters:

Returns:

Source: rotateBy.js

tapspace.geometry.Vector:scaleBy(multiplier)

Scale the vector uniformly with multiplier.

Parameters:

Returns:

Source: scaleBy.js

tapspace.geometry.Vector:scaleTo

Alias of tapspace.geometry.Vector:normalize

tapspace.geometry.Vector:subtract

Alias of tapspace.geometry.Vector:difference

tapspace.geometry.Vector:transformBy(tr)

Transform the displacement vector by affine transformation. This can rotate and scale the vector but cannot translate it because only position vectors can be translated.

Parameters:

Returns:

Source: transformBy.js

tapspace.geometry.Vector:transitRaw(newBasis)

Represent the vector in another basis. Unlike changeBasis, returns a plain object without basis data.

Parameters:

Returns:

Source: transitRaw.js

tapspace.geometry.Vector.fromAverage(basis, vecs)

Parameters:

Returns:

Source: fromAverage.js

tapspace.geometry.Vector.fromPolar(basis, radius, angle, depth)

Create a vector from cylindrical polar coordinates.

Parameters:

Returns:

Source: fromPolar.js

tapspace.geometry.Vector.fromSpherical(basis, magnitude, theta, phi)

Parameters:

Returns:

Source: fromSpherical.js

tapspace.geometry.Volume(basis, volume)

A volume in space. Always zero or positive. Will maintain correct value when a coordinate transition changes the scale of the reference frame.

Parameters:

Contents:

Source: Volume/index.js

tapspace.geometry.Volume:changeBasis(newBasis)

The basis change of a volume changes the basis and represents the same volume in the target basis. Only change in scale affects the representation.

Parameters:

Returns:

Source: changeBasis.js

tapspace.geometry.Volume:getRaw()

Returns: plain volume as a number without basis data.

Source: getRaw.js

tapspace.geometry.Volume:transitRaw(newBasis)

Represent the volume in another basis. Unlike changeBasis, returns a plain number without basis data.

Parameters:

Returns:

Source: transitRaw.js

tapspace.interaction

Interactions define how gestures affect components. Interactions are set up via ability methods such as Item:tappable. The easiest way to use interactions is via the ability methods.

Under the hood:

Dependency chart:

Tapspace interaction dependency chart

Contents:

Source: interaction/index.js

tapspace.interaction.Approach(source, target, options)

Makes the source emit approach events when the camera enters or leaves a threshold distance radius. Toggles ‘active-approach’ class on target.

Parameters:

Makes source emit:

TODO Alternative names:

Contents:

Source: Approach/index.js

tapspace.interaction.Approach:bind()

Bind event listeners.

Source: Approach/index.js

tapspace.interaction.Approach:unbind()

Unbind capturer and listeners.

Source: Approach/index.js

tapspace.interaction.Hold(source, target, options)

Hold interaction. A successful hold gesture requires the user to keep one or more pointers pressed calmly on the source component.

Hold is a time-restricted gesture. Time-restricted gestures are difficult for users to find and execute. Therefore it is strongly recommended to animate or other way communicate that “if you hold your pointer here longer you will see something happen”. Use holdstart and holdprogress events for that.

Hold is also a space-restricted gesture as it is limited by the distance the pointers are allowed to move. Therefore adjust the maxTravel option to the required duration and the shakiness of the environment and the motor skills of your users.

Parameters:

Makes the source emit:

Contents:

Source: Hold/index.js

tapspace.interaction.Hold:bind()

Bind gesture event listeners.

Source: Hold/index.js

tapspace.interaction.Hold:unbind()

Unbind capturer.

Source: Hold/index.js

tapspace.interaction.KeyboardPan:bind()

Bind event listeners.

Source: KeyboardPan/index.js

tapspace.interaction.KeyboardPan:unbind()

Unbind listeners.

Source: KeyboardPan/index.js

tapspace.interaction.KeyboardPan:update(options)

Update panning options.

Parameters:

Source: update.js

tapspace.interaction.KeyboardZoom:bind()

Bind event listeners.

Source: KeyboardZoom/index.js

tapspace.interaction.KeyboardZoom:unbind()

Unbind listeners.

Source: KeyboardZoom/index.js

tapspace.interaction.Pinch(source, target, options)

Pinch transform interaction for items and other interactive planes. Drag, scale, and rotate items by using pointers. During pinch the target has the class active-pinch.

Parameters:

Makes the source emit:

Contents:

Source: Pinch/index.js

tapspace.interaction.Pinch:bind()

Bind gesture event listeners.

Source: Pinch/index.js

tapspace.interaction.Pinch:disableDilation()

Disable scaling freedom. Preserve other enabled freedoms.

Returns:

Source: disableDilation.js

tapspace.interaction.Pinch:disableRotation()

Disable rotation freedom. Preserve other enabled freedoms.

Returns:

Source: disableRotation.js

tapspace.interaction.Pinch:disableTranslation()

Disable translation freedom. Preserve other enabled freedoms. If freedom did not have a pivot set, the item anchor becomes the new pivot.

Returns:

Source: disableTranslation.js

tapspace.interaction.Pinch:enableDilation(pivot)

Enable scaling freedom. Mix it with other enabled freedoms.

Parameters:

Returns:

Source: enableDilation.js

tapspace.interaction.Pinch:enableRotation(pivot)

Enable rotation freedom. Mix it with other enabled freedoms.

Parameters:

Returns:

Source: enableRotation.js

tapspace.interaction.Pinch:enableTranslation()

Enable translation freedom. Mix it with other enabled freedoms. This cancels any fixed pivot points.

Returns:

Source: enableTranslation.js

tapspace.interaction.Pinch:getFreedom()

Returns:

Source: getFreedom.js

tapspace.interaction.Pinch:hasAnyFreedom()

Test if the interaction has any freedom dimensions enabled. No freedoms is equivalent to disabled interaction.

Returns:

Source: hasAnyFreedom.js

tapspace.interaction.Pinch:unbind()

Unbind listeners and stop the ongoing gesture if any.

Source: unbind.js

tapspace.interaction.RealignView(viewport)

Re-align the viewport on resize. Keeps the viewport anchor at the same position relative to the space. Pan the viewport during the resize so that the anchor stays fixed to the same position in space.

Parameters:

Emits via viewport:

Contents:

Source: RealignView/index.js

tapspace.interaction.RealignView:bind()

Bind event listeners

Source: RealignView/index.js

tapspace.interaction.RealignView:unbind()

Unbind listeners

Source: RealignView/index.js

tapspace.interaction.Slide(source, target, options)

Slide interaction. Slide is like dragging and panning but only allows movement along a certain direction.

Parameters:

Makes the source emit:

Contents:

Source: Slide/index.js

tapspace.interaction.Slide:bind()

Bind gesture event listeners.

Returns:

Source: Slide/index.js

tapspace.interaction.Slide:unbind()

Unbind capturer.

Source: Slide/index.js

tapspace.interaction.Tap(source, target, options)

Tap interaction.

Parameters:

Makes the source emit:

Contents:

Source: Tap/index.js

tapspace.interaction.Tap:bind()

Bind gesture event listeners.

Source: bind.js

tapspace.interaction.Tap:unbind()

Unbind capturer.

Source: unbind.js

tapspace.interaction.Tap:update(newOptions)

Parameters:

Source: update.js

tapspace.interaction.WheelRotate(viewport, options)

Wheel rotate interaction for viewports. Rotate the origin planes by mouse wheel left-right axis.

Parameters:

Contents:

Source: WheelRotate/index.js

tapspace.interaction.WheelRotate:bind()

Bind event listeners

Source: WheelRotate/index.js

tapspace.interaction.WheelRotate:unbind()

Unbind listeners

Source: WheelRotate/index.js

tapspace.interaction.WheelZoom(viewport, options)

Wheel zoom interaction for viewports. Scale the origin planes by mouse wheel.

Parameters:

Contents:

Source: WheelZoom/index.js

tapspace.interaction.WheelZoom:bind()

Bind event listeners

Source: WheelZoom/index.js

tapspace.interaction.WheelZoom:unbind()

Unbind listeners

Source: WheelZoom/index.js

tapspace.interactions.KeyboardPan(source, target, options)

Translate the component by using keyboard.

Parameters:

Makes the source emit:

Source: KeyboardPan/index.js

tapspace.interactions.KeyboardZoom(source, target, options)

Make the viewport zoom in and out, relative to the target.

Parameters:

Makes the source emit:

Source: KeyboardZoom/index.js

tapspace.loaders

Helpers to preload content such as images to determine their dimensions before inserting to space. Provides also utilities for recursive loading, construction, and destruction.

Contents:

Source: loaders/index.js

tapspace.loaders.TreeLoader(config)

An asynchronous and recursive loader for your tree-structured content. Use this to build infinite or very deep, zoomable web applications to overcome limits of floating point arithmetics.

Each node of the tree is a space. Each space should have unique ID.

To setup the loader, you need to implement a few functions: mapper, backmapper, tracker, and backtracker. The mappers define the relative positions of content and the trackers define the structure and order of content.

The mappers are allowed to be incomplete in a sense that if one yields null result then another will be called in reverse manner. If both yield null, then the loader determines that no mapping is available and avoids placing the space until the tree has enough context to facilitate the mapping. Implement the mappers to suit your data: if your datum stores its position relative to the parent, you only need a good backmapper; if your datum stores the locations of its children, a good mapper. If your data allows both mappers to be good, this provides the benefit that the placeholder content such as loading animations can be positioned for adjacent spaces before their data are fetched.

Parameters:

Emits:

By calling loader.loadSpace(id, basis) the loader is initiated and the tree-building starts. However, the loader does not yet know your content. To provide the content, and also means to render and retrieve the content, you need to write an ‘open’ event handler:

loader.on('open', (ev) => { 
})

Inside the handler, you can create your content for your tree node, like text, images, html, loading animations. Place the content into a tapspace item or plane, and call loader.addSpace(id, content).

Here is a minimal example:

loader.on('open', (ev) => {
  const placeholder = tapspace.createItem('loading...')
  loader.addSpace(ev.id, placeholder)
  fetch('https://api.example.com/data')
    .then(response => {
      if (!response.ok) throw new Error('Network response was not OK')
      return response.json()
    })
    .then(data => {
      const item = tapspace.createItem(data.html)
      loader.addSpace(ev.id, item)
      loader.openNeighbors(ev.id, ev.depth)
    })
    .catch(error => {
      const item = tapspace.createItem(error.message)
      loader.addSpace(ev.id, item)
      console.error('Error:', error)
    })
})

The loader also emits ‘close’ event. You must handle the event by calling loader.removeSpace(ev.id) and some other deconstruction behavior if your code needs it. For example:

loader.on('close', (ev) => {
  streams[ev.id].close()
  loader.removeSpace(ev.id)
})

Here is a complete configuration example:

const loader = new tapspace.loaders.TreeLoader({
  viewport: viewport,

  mapper: function (parentId, parent, childId) {
    // Find the location for the child, relative to the parent.
    // The return value must be a Basis.
    // Get the parent basis, and transform it as you like.
    // Return null if there is no place for the child.
    const data = store[parentId]
    const dataPoint = data.points[childId]
    if (dataPoint) {
      return parent.getBasis().offset(dataPoint.x, dataPoint.y)
    }
    return null
  },

  backmapper: function (childId, child, parentId) {
    // Find the location for the parent, relative to the child.
    const data = store[childId]
    const dataPoint = data.parent.point
    if (dataPoint) {
      return child.getBasis().offset(dataPoint.x, dataPoint.y)
    }
    return null
  },

  tracker: function (parentId, parent) {
    // Find IDs of the child nodes, given the parent node.
    // Return an empty array if there are no childred.
    const dataPoints = store[parentId].points
    const idArray = dataPoints.map(p => p.id)
    return idArray
  },

  backtracker: function (childId, child) {
    // Find ID of the parent node, given the child node.
    // Return null if there are no parents. Such child is the root node.
    const data = store[childId]
    if (data.parent.id) {
      return data.parent.id
    }
    return null
  }
})

Now you have the TreeLoader constructed. You still need to build a driver for it. The driver is a function ran at each viewport idle event or similar, non-realtime schedule. Its purpose is to find our current location in the tree and open/close the TreeLoader nodes accordingly. See examples.

Contents:

Source: TreeLoader/index.js

tapspace.loaders.TreeLoader:addSpace(id, content)

Add a space, given that it has existing neighbors and is expected. A space is expected after the loader emits ‘open’ and before it is closed. If the space exists already, the old space is replaced with the content.

Parameters:

Returns:

Source: addSpace.js

tapspace.loaders.TreeLoader:closeAll([data])

Close all spaces. Useful to clear loader before TreeLoader:initSpace call. Makes the loader emit ‘close’ for each closing space. The event should be handled at least by calling loader.removeSpace()

Parameters:

Source: closeAll.js

tapspace.loaders.TreeLoader:closeChild(parentId, childId[, data])

Close child space and all its children. Makes the loader emit ‘close’. The event should be handled by calling loader.removeSpace()

Parameters:

Source: closeChild.js

tapspace.loaders.TreeLoader:closeChildren(parentId[, data])

Close child spaces, given that the given space exists. Synchronous.

Parameters:

Source: closeChildren.js

tapspace.loaders.TreeLoader:closeNeighbors(rootIds, maxDepth[, data])

Close those neighbors that are farther than the given depth from one of the given IDs.

Parameters:

Source: closeNeighbors.js

tapspace.loaders.TreeLoader:closeParent(childId[, data])

Close parent space, given that the given child space exists.

Parameters:

Source: closeParent.js

tapspace.loaders.TreeLoader:closeSpace(id[, data])

Close the space and all its children and successors. In other words, close the subtree where the space is the root. Makes the loader emit ‘close’. The event should be handled by calling loader.removeSpace()

Parameters:

Source: closeSpace.js

tapspace.loaders.TreeLoader:countSpaces()

Get number of open spaces.

Returns:

Source: countSpaces.js

tapspace.loaders.TreeLoader:getFrontier(id, depth)

Find a frontier for the given root space id until the given depth. In other words, find spaces that have unopened parents or children and the distance to the root space is depth or smaller. The root space itself can belong to the frontier.

Parameters:

Returns:

Source: getFrontier.js

tapspace.loaders.TreeLoader:getSpace(id)

Get a space by its ID. Null if does not exist.

Parameters:

Returns:

Source: getSpace.js

tapspace.loaders.TreeLoader:getSpaces()

Get all loaded spaces.

Returns:

Source: getSpaces.js

tapspace.loaders.TreeLoader:hasSpace(id)

Test if the loader has the space by its ID. Useful for checking if the space is ready or removed.

Parameters:

Returns:

Source: hasSpace.js

tapspace.loaders.TreeLoader:initSpace(id, basis, depth[, data])

Initialize the tree. Add and load the first space and continue loading neighboring spaces to the given depth.

Parameters:

Emits:

Source: initSpace.js

tapspace.loaders.TreeLoader:openChild(parentId, childId[, data])

Open a child space, given that the parent exists.

Parameters:

Emits:

Source: openChild.js

tapspace.loaders.TreeLoader:openChildren(parentId[, data])

Open all child spaces for the given parent id.

Parameters:

Source: openChildren.js

tapspace.loaders.TreeLoader:openNeighbors(id, depth[, data])

Open parents and children until max depth. The recursive opening until the max depth requires that your event handler implementation for the ‘open’ event does call TreeLoader:openNeighbors method again and passes the depth property the loader attached to the ‘open’ event. However, you are free to stop or limit recursion by not calling the method or decreasing the depth.

Parameters:

Emits:

Source: openNeighbors.js

tapspace.loaders.TreeLoader:openParent(childId[, data])

Open a parent space relative to the given child.

Parameters:

Source: openParent.js

tapspace.loaders.TreeLoader:remapChildren(parentId)

Update placements of children of the given parent. Transform the children to match their new bases. Internally, calls mapper to find the new bases. Synchronous.

Parameters:

Source: remapChildren.js

tapspace.loaders.TreeLoader:remapParent(childId)

Update placement of parent with respect to the given children. Transform the parent to match its new basis. Internally, calls backmapper to find the new basis. If the backmapper is not available, tries mapper. Synchronous.

Parameters:

Source: remapParent.js

tapspace.loaders.TreeLoader:removeSpace(spaceId)

Remove the space, given that the space exists. Does not remove the children.

Parameters:

Source: removeSpace.js

tapspace.loaders.loadImages(imgSrcs, callback)

Preload one or more images and call back when finished.

Usage:

tapspace.loaders.loadImages('hello.png', function (err, img) {
  if (err) { throw err }
  // img is now loaded and has correct dimensions instead of 0x0. 
})

See loadimages package for details.

Source: loadImages.js

tapspace.metrics

Tools to measure geometric properties of content in space.

Contents:

Source: metrics/index.js

tapspace.metrics.Measurement(node, basis, camera, viewportCircle, viewportArea)

A measurement provides geometric information about the node based on the given viewport properties.

Parameters:

Properties:

Contents:

Source: Measurement/index.js

tapspace.metrics.Measurement:getVisualDistance([optimalAreaRatio])

Compute a visual, virtual, heuristic distance to the target. Measures how prominent the target is for the user.

Parameters:

Returns:

Source: getVisualDistance.js

tapspace.version

The semantic version string, for example ‘1.2.3’. It is identical to the version string in the tapspace package.json.

Source: lib/index.js

↑ Back To Top

This site is open source. Improve this page.