Shellfish

Class: Item

html.Item

Base class representing a visual mid-level object.

new html.Item () abstract

item.js:129
Properties:
Name Type Description
ancestorsEnabled bool

[readonly] Whether all ancestors are enabled.
ancestorsVisible bool

[readonly] Whether all ancestors are visible.
aspectRatio number

(default: 0) The aspect ratio of the side lengths. If this value is greater than 0, the element is sized within the constraints of width and height.
bbox html.Item.BoundingBox

[readonly] The item's bounding box in window coordinates.
bboxX number

[readonly] The item's bounding box X position in window coordinates. Reading this gives the current value, but updates aren't propagated automatically.
bboxY number

[readonly] The item's bounding box Y position in window coordinates. Reading this gives the current value, but updates aren't propagated automatically.
bboxWidth number

[readonly] The item's bounding box width in window coordinates.
bboxHeight number

[readonly] The item's bounding box height in window coordinates.
canFocus bool

(default: false) Whether the item may accept keyboard focus.
contentHeight number

[readonly] The current scrolling viewport height.
contentWidth number

[readonly] The current scrolling viewport width.
contentX number

(default: 0) The current horizontal scrolling position.
contentY number

(default: 0) The current vertical scrolling position.
cursor string

The mouse cursor shape over the item. Accepts CSS cursor names.
enabled bool

(default: true) Whether the item accepts user input.
fillHeight bool

(default: false) Whether to fill the parent's height in "free" and "global" position mode. Ignores the "height" parameter.
fillWidth bool

(default: false) Whether to fill the parent's width. Ignores the "width" parameter.
fill bool

[writeonly] Shortcut property for setting fillWidth and fillHeight to the same value.
focus bool

(default: false) Whether the item has the keyboard focus. Setting this will move the focus to the item.
height number

(default: -1) The nominal height. Set to -1 for auto-height.
marginBottom number

(default: 0) The bottom margin's width.
marginLeft number

(default: 0) The left margin's width.
marginRight number

(default: 0) The right margin's width.
marginTop number

(default: 0) The top margin's width.
margins number

[writeonly] Shortcut property for setting marginTop, marginBottom, marginLeft, marginRight to the same value.
maxHeight number

(default: -1) The item's maximum height. It will not grow further.
maxWidth number

(default: -1) The item's maximum width. It will not grow further.
minHeight number

(default: 0) The item's minimum height. It will not shrink further.
minWidth number

(default: 0) The item's minimum width. It will not shrink further.
opacity number

(default: 1) The item's opacity between 0 (invisible) and 1 (fully opaque).
order number

(default: 0) The item's layout order. Items are displayed by their order value first, and then by their source code order. The order number may be negative.
origin string

(default: "top-left") The corner of the coordinates origin in "free" and "global" position mode: top-left|top-right|bottom-right|bottom-left
perspective number

(default: 1000) The distance of the viewer to the z = 0 plane for rotations in 3-dimensional space. Use 0 to disable perspective projection.
position string

(default: "inline") The positioning mode: inline|free|global
rotationAngle number

(default: 0) The rotation angle in degrees.
rotationAxis vec3

(default: vec3(0, 1, 0)) The rotation axis. Rotations are counter-clockwise.
ruler html.Ruler

(default: null) The ruler object to use.
scrolling bool

[readonly] Whether the item is currently scrolling.
style Array.<string>

(default: []) A list of custom CSS class names.
trapFocus bool

(default: false) Whether to trap keyboard focus to this element, including its descendants.
visible bool

(default: true) Whether the item is visible. To check if the item is really visible, you also have to check for ancestorsVisible.
width number

(default: -1) The nominal width. Set to -1 for auto-width.
x number

(default: 0) The X coordinate value.
y number

(default: 0) The Y coordinate value.

Extends

Methods

css (prop, value)

item.js:1157

Applies a CSS property to this item's HTML element. This method makes use of caching in order to minimize the number of actual operations on the DOM. Do not use CSS shortcuts, such as margin, with this method.

Name Type Description
prop string

The CSS property.
value string

The value to set.

enablePositionTracking ()

item.js:1189

Enables tracking the position (propagating updates of the bboxX and bboxY properties) of this element. This is disabled by default for performance reasons, but, if needed, can be enabled by calling this method.

Calling this method multiple times has no further effect.

get ()HTMLElement abstract

item.js:1605

Returns the item's DOM element. Subclasses must override this abstract method.

Returns:
Type Description
HTMLElement The DOM element.

inView (x, y, w, h, recursive)

item.js:1541

Returns whether the given box is (partially) within the viewport. The coordinates are in this element's local coordinate system.

Name Type Description
x number

The X position to test.
y number

The Y position to test.
w number

The width to test.
h number

The height to test.
recursive bool

If true, this method is called recursively to return whether the box is (partially) visible at all.

nextFrame (callback)

item.js:1589

Invokes the given callback on the next render frame.

Name Type Description
callback function

The callback to invoke.

updatePosition ()

item.js:528

Updates the CSS properties to position and size the item.

withoutSizing (f)

item.js:1617

Runs the given function without doing the rather expensive sizing calculations inbetween. Sizing calculations are frozen globally, not only for this item, during the function.

Name Type Description
f function

The function to run in frozen mode.

Type Definitions

html.Item.BoundingBox

A bounding box of an element on screen.

Properties:
Name Type Description
x number

The X position.
y number

The Y position.
width number

The width.
height number

The height.

html.Item.KeyboardEvent

A keyboard event.

Properties:
Name Type Description
accepted bool

Set to true if you handled the event in order to prevent it from bubbling up in the hierarchy of elements.
original KeyboardEvent

The original HTML event.
key string

The name of the pressed key.
char string

The character of the pressed key.
altKey bool

Whether the Alt modifier is pressed.
ctrlKey bool

Whether the Ctrl modifier is pressed.
metaKey bool

Whether the Meta modifier is pressed.
shiftKey bool

Whether the Shift modifier is pressed.
location number

The location of the pressed key (see https://devdocs.io/dom/keyboardevent/location).
repeat bool

Whether the key event was triggered by auto-repeat of an already pressed key.

Events

html.Item.event:keyDown

item.js:237

Is triggered when a key is pressed while the item has keyboard focus.

Name Type Description
event html.Item.KeyboardEvent

The event object.

html.Item.event:keyUp

item.js:246

Is triggered when a key is released while the item has keyboard focus.

Name Type Description
event html.Item.KeyboardEvent

The event object.