Interface: View
View is a base class for all other visual components. All View-derived components have the following properties, methods, and events in addition to their own.
Hierarchy
-
↳
View
↳↳
Element
↳↳
Container
↳↳
Text
↳↳
Button
↳↳
Input
↳↳
Textarea
↳↳
Checkbox
↳↳
Switch
↳↳
Slider
↳↳
Select
↳↳
Image
↳↳
SVG
↳↳
Audio
↳↳
Video
↳↳
HTML
↳↳
Drawing
↳↳
Confetti
↳↳
FlyingEmojis
↳↳
Rectangle
↳↳
Ellipse
↳↳
Polygon
↳↳
Star
↳↳
Heart
↳↳
Line
↳↳
Arrow
↳↳
Canvas
↳↳
Location
↳↳
Timer
Properties
BackdropBlur
• Optional
BackdropBlur: BackdropBlurEffect
BlendMode
• Optional
BlendMode: BlendModeEffect
Blur
• Optional
Blur: BlurEffect
Brightness
• Optional
Brightness: BrightnessEffect
Contrast
• Optional
Contrast: ContrastEffect
Draggable
• Optional
Draggable: DraggableEffect
Follow
• Optional
Follow: FollowEffect
Glow
• Optional
Glow: GlowEffect
Grayscale
• Optional
Grayscale: GrayscaleEffect
HueRotate
• Optional
HueRotate: HueRotateEffect
Invert
• Optional
Invert: InvertEffect
LetterSpacing
• Optional
LetterSpacing: LetterSpacingEffect
LookAt
• Optional
LookAt: LookAtEffect
Oscillate
• Optional
Oscillate: OscillateEffect
Physics
• Optional
Physics: PhysicsEffect
Saturation
• Optional
Saturation: SaturationEffect
Sepia
• Optional
Sepia: SepiaEffect
Shadow
• Optional
Shadow: ShadowEffect
Spin
• Optional
Spin: SpinEffect
TextOutline
• Optional
TextOutline: TextOutlineEffect
Transform
• Optional
Transform: TransformEffect
backgroundColor
• backgroundColor: undefined
| string
The background color of the component.
Can be any valid CSS color value (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value (opens in a new tab)).
An undefined
background color is transparent.
Example
// Set the background color of the view to a translucent red.
view.backgroundColor = 'rgba(255, 0, 0, 50%)'
color
• color: undefined
| string
The foreground or text color of the component.
Can be any valid CSS color value (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value (opens in a new tab)).
An undefined
foreground color is inherited from one of the component's ancestors.
Example
// Set the foreground color of the view to red.
view.color = 'red';
componentType
• Readonly
componentType: string
The component's type. E.g. "View", "Text", "Button", "Page", etc.
Inherited from
height
• height: number
The height of the component.
id
• Readonly
id: number
Every Component is assigned a unique numerical id that cannot be changed.
Components can be looked up by id using the get
function.
Inherited from
link
• link: undefined
| string
The address of the link. Can be a URL to a web page, a 'tel:' phone number, a 'mailto:' email address, or a 'sms:' phone number. Also can be a relative link to a page, "@previous" for the previous page, or "@next" for the next page. If undefined the component is not treated as a link.
Default
undefined
linkRel
• linkRel: LinkRelType
See
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel (opens in a new tab)
linkTarget
• linkTarget: "_blank"
| "_self"
| "_parent"
| "_top"
The target of the link. Can be '_blank' (open in new window or tab), '_self' (replace current page), '_parent' (replace parent if in an iframe), or '_top' (replace top if in an iframe).
Default
'_self'
See
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target (opens in a new tab)
linkTitle
• linkTitle: string
The title of the link displayed on hover. If '' nothing is displayed.
Default
''
name
• name: undefined
| string
Every Component can have a user-assigned name. It can be anything and is not guaranteed to be unique.
Components can be looked up by name using the get
function.
Inherited from
opacity
• opacity: number
The component's opacity, or level of transparency.
1 is fully opaque (not transparent at all), 0.5 is 50% see-through, and 0 is completely transparent.
page
• Readonly
page: undefined
| Page
The Page that this component is a child of, if any.
parent
• Readonly
parent: undefined
| View
When added to a Container (or a Page, which is a Container), the Container is assigned to the parent property.
rotation
• rotation: number
The component's rotation, in degrees.
scale
• scale: number
The component's scale multiplier.
style
• style: Partial
(opens in a new tab)<CSSStyleDeclaration
(opens in a new tab)>
Low-level access to the component's CSS property.
tabIndex
• tabIndex: undefined
| number
Control if or how the component is focused when the tab key is pressed.
0 - The component should be focusable in sequential keyboard navigation, after any positive tabIndex values. a positive value - Should be focusable in sequential keyboard navigation, with the order defined by the value. -1 - Should not be focusable in sequential keyboard navigation, but could be focused programmatically. undefined - the browser decides whether the component is focusable.
Default
undefined
See
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex (opens in a new tab)
visible
• visible: boolean
The component's visibility.
true
is visible, false
is invisible
width
• width: number
The width of the component.
x
• x: number
The component's x coordinate.
y
• y: number
The component's y coordinate.
Methods
addEffect
▸ addEffect(effect
): void
Add an effect to the component.
Parameters
Name | Type |
---|---|
effect | string |
Returns
void
clone
▸ clone(): View
Create an exact duplicate of a component.
The clone must be added to a container with appendChild
to be visible.
Returns
Example
const clone = view.clone();
clone.x = 100;
clone.y = 100;
view.page.appendChild(clone);
Overrides
dispatchEvent
▸ dispatchEvent(event
): Promise
(opens in a new tab)<void
>
Triggers the event listeners for the specified event.
Parameters
Name | Type |
---|---|
event | Event (opens in a new tab) |
Returns
Promise
(opens in a new tab)<void
>
Inherited from
focus
▸ focus(options?
): void
Parameters
Name | Type |
---|---|
options? | FocusOptions |
Returns
void
hasPointerCapture
▸ hasPointerCapture(pointerId
): boolean
Parameters
Name | Type |
---|---|
pointerId | number |
Returns
boolean
localPointFromClient
▸ localPointFromClient(x
, y
): Object
Convert a client viewport position to a position suitable for a View. Useful for converting mouse or touch positions.
Parameters
Name | Type | Description |
---|---|---|
x | number | The x position in the client viewport. |
y | number | The y position in the client viewport. |
Returns
Object
an object with x and y properties.
Name | Type |
---|---|
x | number |
y | number |
Example
let dragging = false;
let pointerOffset;
this.on("pointerdown", (event) => {
this.setPointerCapture(event.pointerId);
// note: objects are positioned within their parent's coordinate system
const point = this.parent.localPointFromClient(event.clientX, event.clientY)
pointerOffset = { x: point.x - this.x, y: point.y - this.y };
dragging = true;
});
this.on("pointermove", (ev) => {
if (!dragging)
return;
// note: objects are positioned within their parent's coordinate system
const point = this.parent.localPointFromClient(ev.clientX, ev.clientY);
this.x = point.x - pointerOffset.x;
this.y = point.y - pointerOffset.y;
});
this.on("pointerup", (event) => {
this.releasePointerCapture(event.pointerId);
dragging = false;
});
on
▸ on<K
>(type
, listener
, options?
): () => void
Add an event listener to the component.
Type parameters
Name | Type |
---|---|
K | extends keyof EventHandlersEventMap |
Parameters
Name | Type |
---|---|
type | K |
listener | (event : EventHandlersEventMap [K ]) => any |
options? | EventListenerOptions |
Returns
fn
Returns a function that removes the event listener.
▸ (): void
Add an event listener to the component.
Returns
void
Returns a function that removes the event listener.
Inherited from
releasePointerCapture
▸ releasePointerCapture(pointerId
): void
Parameters
Name | Type |
---|---|
pointerId | number |
Returns
void
remove
▸ remove(): void
Remove the component from its parent.
Returns
void
Example
view.remove();
removeEffect
▸ removeEffect(effect
): void
Remove an effect to the component.
Parameters
Name | Type |
---|---|
effect | string |
Returns
void
setPointerCapture
▸ setPointerCapture(pointerId
): void
Parameters
Name | Type |
---|---|
pointerId | number |
Returns
void