Options
All
  • Public
  • Public/Protected
  • All
Menu

Module @swim/view

@swim/view

package documentation chat

@swim/view provides a unified HTML, SVG, and Canvas view hierarchy, with integrated controller architecture, animated procedural styling, and constraint-based layouts. @swim/view is part of the @swim/ui framework.

Installation

npm

For an npm-managed project, npm install @swim/view to make it a dependency. TypeScript sources will be installed into node_modules/@swim/view/main. Transpiled JavaScript and TypeScript definition files install into node_modules/@swim/view/lib/main. And a pre-built UMD script can be found in node_modules/@swim/view/dist/main/swim-view.js.

Browser

Browser applications can load swim-ui.js—which bundles the @swim/view library—along with its swim-core.js dependency, directly from the swimOS CDN.

<!-- Development -->
<script src="https://cdn.swimos.org/js/latest/swim-core.js"></script>
<script src="https://cdn.swimos.org/js/latest/swim-ui.js"></script>

<!-- Production -->
<script src="https://cdn.swimos.org/js/latest/swim-core.min.js"></script>
<script src="https://cdn.swimos.org/js/latest/swim-ui.min.js"></script>

Alternatively, the standalone swim-system.js script may be loaded from the swimOS CDN, which bundles @swim/view together with all other @swim/system libraries.

<!-- Development -->
<script src="https://cdn.swimos.org/js/latest/swim-system.js"></script>

<!-- Production -->
<script src="https://cdn.swimos.org/js/latest/swim-system.min.js"></script>

Usage

ES6/TypeScript

@swim/view can be imported as an ES6 module from TypeScript and other ES6-compatible environments.

import * as view from "@swim/view";

CommonJS/Node.js

@swim/view can also be used as a CommonJS module in Node.js applications.

var view = require("@swim/view");

Browser

When loaded by a web browser, the swim-ui.js script adds all @swim/view library exports to the global swim namespace. The swim-ui.js script requires that swim-core.js has already been loaded.

The swim-system.js script also adds all @swim/view library exports to the global swim namespace, making it a drop-in replacement for 'swim-core.js' and swim-ui.js when additional @swim/system libraries are needed.

Index

Classes

Interfaces

Type aliases

Variables

Type aliases

AttributeAnimatorType

AttributeAnimatorType: typeof String | typeof Boolean | typeof Number | typeof Length | typeof Color | typeof Transform | [typeof Number, typeof String] | [typeof Length, typeof String] | [typeof Color, typeof String]

LayoutAnchorGetState

LayoutAnchorGetState<S>: (this: S, oldState: number) => number

Type parameters

Type declaration

    • (this: S, oldState: number): number

    • Parameters

      • this: S
      • oldState: number

      Returns number

LayoutAnchorSetValue

LayoutAnchorSetValue<S>: (this: S, newValue: number) => void

Type parameters

Type declaration

    • (this: S, newValue: number): void

    • Parameters

      • this: S
      • newValue: number

      Returns void

MemberAnimatorDescriptorType

MemberAnimatorDescriptorType<C>: C extends typeof Transform ? MemberAnimatorDescriptor<Transform, AnyTransform> : C extends typeof Font ? MemberAnimatorDescriptor<Font, AnyFont> : C extends typeof Color ? MemberAnimatorDescriptor<Color, AnyColor> : C extends typeof Length ? MemberAnimatorDescriptor<Length, AnyLength> : C extends typeof Angle ? MemberAnimatorDescriptor<Angle, AnyAngle> : C extends typeof Number ? MemberAnimatorDescriptor<number, number | string> : C extends typeof Boolean ? MemberAnimatorDescriptor<boolean, boolean | string> : C extends typeof String ? MemberAnimatorDescriptor<string> : C extends typeof Object ? MemberAnimatorDescriptor<Object> : C extends FromAny<any> ? MemberAnimatorDescriptor<any> : MemberAnimatorDescriptor<any>

Type parameters

MemberAnimatorTypeConstructor

MemberAnimatorTypeConstructor: FromAny<any> | typeof Object | typeof String | typeof Boolean | typeof Number | typeof Angle | typeof Length | typeof Color | typeof Font | typeof Transform

PopoverPlacement

PopoverPlacement: "none" | "above" | "below" | "over" | "top" | "bottom" | "right" | "left"

PopoverState

PopoverState: "hidden" | "showing" | "shown" | "hiding"

StyleAnimatorType

StyleAnimatorType: typeof String | typeof Number | typeof Length | typeof Color | typeof LineHeight | typeof FontFamily | typeof Transform | typeof BoxShadow | [typeof Number, typeof String] | [typeof Length, typeof String] | [typeof Color, typeof String]

ViewIdiom

ViewIdiom: "unspecified" | "mobile" | "tablet" | "desktop"

Variables

Const AttributeAnimator

AttributeAnimator: AttributeAnimatorClass = (function (_super: typeof TweenFrameAnimator): AttributeAnimatorClass {const AttributeAnimator: AttributeAnimatorClass = function <V extends ElementView, T, U>(this: AttributeAnimator<V, T, U> | undefined, view: V | string, name: string | AttributeAnimatorType,value?: T | null, transition?: Transition<T> | null): AttributeAnimator<V, T, U> | PropertyDecorator {if (this instanceof AttributeAnimator) { // constructorif (transition === void 0) {transition = null;}const _this = _super.call(this, value, transition) || this;_this._view = view;_this._name = name;return _this;} else { // decoratorconst type = name as AttributeAnimatorType;name = view as string;if (type === String) {return ElementView.decorateAttributeAnimator.bind(void 0, AttributeAnimator.String, name);} else if (type === Boolean) {return ElementView.decorateAttributeAnimator.bind(void 0, AttributeAnimator.Boolean, name);} else if (type === Number) {return ElementView.decorateAttributeAnimator.bind(void 0, AttributeAnimator.Number, name);} else if (type === Length) {return ElementView.decorateAttributeAnimator.bind(void 0, AttributeAnimator.Length, name);} else if (type === Color) {return ElementView.decorateAttributeAnimator.bind(void 0, AttributeAnimator.Color, name);} else if (type === Transform) {return ElementView.decorateAttributeAnimator.bind(void 0, AttributeAnimator.Transform, name);} else if (Array.isArray(type) && type.length === 2) {const [type0, type1] = type;if (type0 === Number && type1 === String) {return ElementView.decorateAttributeAnimator.bind(void 0, AttributeAnimator.NumberOrString, name);} else if (type0 === Length && type1 === String) {return ElementView.decorateAttributeAnimator.bind(void 0, AttributeAnimator.LengthOrString, name);} else if (type0 === Color && type1 === String) {return ElementView.decorateAttributeAnimator.bind(void 0, AttributeAnimator.ColorOrString, name);}}throw new TypeError("" + type);}} as AttributeAnimatorClass;__extends(AttributeAnimator, _super);Object.defineProperty(AttributeAnimator.prototype, "view", {get: function (this: AttributeAnimator<ElementView, unknown, unknown>): ElementView {return this._view;},enumerable: true,configurable: true,});Object.defineProperty(AttributeAnimator.prototype, "node", {get: function (this: AttributeAnimator<ElementView, unknown, unknown>): Element {return this._view._node;},enumerable: true,configurable: true,});Object.defineProperty(AttributeAnimator.prototype, "name", {get: function (this: AttributeAnimator<ElementView, unknown, unknown>): string {return this._name;},enumerable: true,configurable: true,});Object.defineProperty(AttributeAnimator.prototype, "attributeValue", {get: function (this: AttributeAnimator<ElementView, unknown, unknown>): string | null {return this._view._node.getAttribute(this._name);},enumerable: true,configurable: true,});AttributeAnimator.prototype.update = function <V extends ElementView, T, U>(this: AttributeAnimator<V, T, U>,newValue: T, oldValue: T): void {if (!Objects.equal(oldValue, newValue)) {this.willUpdate(newValue, oldValue);this._view.setAttribute(this._name, newValue);this.didUpdate(newValue, oldValue);}};AttributeAnimator.prototype.willUpdate = function <V extends ElementView, T, U>(this: AttributeAnimator<V, T, U>,newValue: T, oldValue: T): void {// hook};AttributeAnimator.prototype.didUpdate = function <V extends ElementView, T, U>(this: AttributeAnimator<V, T, U>,newValue: T, oldValue: T): void {// hook};AttributeAnimator.prototype.delete = function <V extends ElementView, T, U>(this: AttributeAnimator<V, T, U>): void {this._view.setAttribute(this._name, null);};return AttributeAnimator;}(TweenFrameAnimator))

Const LayoutAnchor

LayoutAnchor: LayoutAnchorClass = (function (_super: typeof ConstrainBinding): LayoutAnchorClass {const LayoutAnchor: LayoutAnchorClass = function <S extends LayoutScope>(this: LayoutAnchor<S> | undefined, scope: S | LayoutAnchorDescriptor<S>,name?: string, value?: number, strength?: ConstraintStrength, enabled?: boolean): LayoutAnchor<S> | PropertyDecorator {if (this instanceof LayoutAnchor) { // constructorlet _this: LayoutAnchor<S> = function (state?: number): number | S {if (state === void 0) {return _this.state;} else {_this.enabled(true).setState(state);return _this._scope;}} as LayoutAnchor<S>;(_this as any).__proto__ = this;if (enabled === void 0) {enabled = false;}_this = _super.call(_this, scope as S, name!, value!, strength!) || _this;_this._enabled = enabled;return _this;} else { // decoratorconst descriptor = scope as LayoutAnchorDescriptor<S>;return View.decorateLayoutAnchor.bind(void 0, LayoutAnchor, descriptor);}} as LayoutAnchorClass;__extends(LayoutAnchor, _super);LayoutAnchor.prototype.enabled = function <S extends LayoutScope>(this: LayoutAnchor<S>, enabled?: boolean): boolean | LayoutAnchor<S> {if (enabled === void 0) {return this._enabled;} else {this._enabled = enabled;return this;}};LayoutAnchor.prototype.updateValue = function <S extends LayoutScope>(this: LayoutAnchor<S>, newValue: number): void {const oldValue = this._value;if (oldValue !== newValue) {this._value = newValue;if (this._enabled) {const setValue = this.setValue;if (setValue) {setValue.call(this._scope, newValue);}}}};LayoutAnchor.prototype.updateState = function <S extends LayoutScope>(this: LayoutAnchor<S>): void {if (!this._enabled) {const getState = this.getState;if (getState) {const oldState = this._state;const newState = getState.call(this._scope, oldState);this.setState(newState);}}};return LayoutAnchor;}(ConstrainBinding))

Const MemberAnimator

MemberAnimator: MemberAnimatorClass = (function (_super: typeof TweenAnimator): MemberAnimatorClass {const MemberAnimator: MemberAnimatorClass = function <V extends AnimatedView, T, U>(this: MemberAnimator<V, T, U> | undefined, view: V | MemberAnimatorTypeConstructor,value?: T | null | MemberAnimatorDescriptor<T, U>, transition?: Transition<T> | null,inherit?: string | null): MemberAnimator<V, T, U> | PropertyDecorator {if (this instanceof MemberAnimator) { // constructorif (transition === void 0) {transition = null;}if (inherit === void 0) {inherit = null;}const _this = _super.call(this, value, transition) || this;_this._view = view;_this._inherit = inherit;return _this;} else { // decoratorconst constructor = view as MemberAnimatorTypeConstructor;const descriptor = value as MemberAnimatorDescriptor<T, U> | undefined;if (constructor === Object) {return View.decorateMemberAnimator.bind(void 0, MemberAnimator.Object, descriptor);} else if (constructor === String) {return View.decorateMemberAnimator.bind(void 0, MemberAnimator.String, descriptor);} else if (constructor === Boolean) {return View.decorateMemberAnimator.bind(void 0, MemberAnimator.Boolean, descriptor);} else if (constructor === Number) {return View.decorateMemberAnimator.bind(void 0, MemberAnimator.Number, descriptor);} else if (constructor === Angle) {return View.decorateMemberAnimator.bind(void 0, MemberAnimator.Angle, descriptor);} else if (constructor === Length) {return View.decorateMemberAnimator.bind(void 0, MemberAnimator.Length, descriptor);} else if (constructor === Color) {return View.decorateMemberAnimator.bind(void 0, MemberAnimator.Color, descriptor);} else if (constructor === Font) {return View.decorateMemberAnimator.bind(void 0, MemberAnimator.Font, descriptor);} else if (constructor === Transform) {return View.decorateMemberAnimator.bind(void 0, MemberAnimator.Transform, descriptor);} else if (FromAny.is(constructor)) {return View.decorateMemberAnimator.bind(void 0, MemberAnimator.Any.bind(void 0, constructor), descriptor);}throw new TypeError("" + constructor);}} as MemberAnimatorClass;__extends(MemberAnimator, _super);Object.defineProperty(MemberAnimator.prototype, "view", {get: function <V extends AnimatedView, T, U>(this: MemberAnimator<V, T, U>): V {return this._view;},enumerable: true,configurable: true,});Object.defineProperty(MemberAnimator.prototype, "inherit", {get: function <V extends AnimatedView, T, U>(this: MemberAnimator<V, T, U>): string | null {return this._inherit;},enumerable: true,configurable: true,});Object.defineProperty(MemberAnimator.prototype, "value", {get: function <V extends AnimatedView, T, U>(this: MemberAnimator<V, T, U>): T | null | undefined {let value = this._value;if (value === void 0) {const inherit = this._inherit;if (inherit !== null) {let view = this._view.parentView;while (view) {const animator = (view as any)[inherit];if (animator instanceof TweenAnimator) {value = animator.value;break;}view = view.parentView;}}}return value;},enumerable: true,configurable: true,});Object.defineProperty(MemberAnimator.prototype, "state", {get: function <V extends AnimatedView, T, U>(this: MemberAnimator<V, T, U>): T | null | undefined {let state = this._state;if (state === void 0) {const inherit = this._inherit;if (inherit !== null) {let view = this._view.parentView;while (view) {const animator = (view as any)[inherit];if (animator instanceof TweenAnimator) {state = animator.state;break;}view = view.parentView;}}}return state;},enumerable: true,configurable: true,});MemberAnimator.prototype.animate = function <V extends AnimatedView, T, U>(this: MemberAnimator<V, T, U>,animator: Animator = this): void {if (!this._disabled || animator !== this) {this._view.animate(animator);}};MemberAnimator.prototype.cancel = function <V extends AnimatedView, T, U>(this: MemberAnimator<V, T, U>): void {// nop};MemberAnimator.prototype.update = function <V extends AnimatedView, T, U>(this: MemberAnimator<V, T, U>,newValue: T, oldValue: T): void {// hook};MemberAnimator.prototype.delete = function <V extends AnimatedView, T, U>(this: MemberAnimator<V, T, U>): void {// nop};return MemberAnimator;}(TweenAnimator))

Const StyleAnimator

StyleAnimator: StyleAnimatorClass = (function (_super: typeof TweenFrameAnimator): StyleAnimatorClass {const StyleAnimator: StyleAnimatorClass = function <V extends ElementView, T, U>(this: StyleAnimator<V, T, U> | undefined, view: V | string | ReadonlyArray<string>,names: string | ReadonlyArray<string> | StyleAnimatorType, value?: T | null,transition?: Transition<T> | null, priority?: string): StyleAnimator<V, T, U> | PropertyDecorator {if (this instanceof StyleAnimator) { // constructorif (transition === void 0) {transition = null;}const _this = _super.call(this, value, transition) || this;_this._view = view;_this._names = names;_this._priority = priority;return _this;} else { // decoratorconst type = names as StyleAnimatorType;names = view as string | ReadonlyArray<string>;if (type === String) {return ElementView.decorateStyleAnimator.bind(void 0, StyleAnimator.String, names);} else if (type === Number) {return ElementView.decorateStyleAnimator.bind(void 0, StyleAnimator.Number, names);} else if (type === Length) {return ElementView.decorateStyleAnimator.bind(void 0, StyleAnimator.Length, names);} else if (type === Color) {return ElementView.decorateStyleAnimator.bind(void 0, StyleAnimator.Color, names);} else if (type === LineHeight) {return ElementView.decorateStyleAnimator.bind(void 0, StyleAnimator.LineHeight, names);} else if (type === FontFamily) {return ElementView.decorateStyleAnimator.bind(void 0, StyleAnimator.FontFamily, names);} else if (type === Transform) {return ElementView.decorateStyleAnimator.bind(void 0, StyleAnimator.Transform, names);} else if (type === BoxShadow) {return ElementView.decorateStyleAnimator.bind(void 0, StyleAnimator.BoxShadow, names);} else if (Array.isArray(type) && type.length === 2) {const [type0, type1] = type;if (type0 === Number && type1 === String) {return ElementView.decorateStyleAnimator.bind(void 0, StyleAnimator.NumberOrString, names);} else if (type0 === Length && type1 === String) {return ElementView.decorateStyleAnimator.bind(void 0, StyleAnimator.LengthOrString, names);} else if (type0 === Color && type1 === String) {return ElementView.decorateStyleAnimator.bind(void 0, StyleAnimator.ColorOrString, names);}}throw new TypeError("" + type);}} as StyleAnimatorClass;__extends(StyleAnimator, _super);Object.defineProperty(StyleAnimator.prototype, "view", {get: function (this: StyleAnimator<ElementView, unknown, unknown>): ElementView {return this._view;},enumerable: true,configurable: true,});Object.defineProperty(StyleAnimator.prototype, "node", {get: function (this: StyleAnimator<ElementView, unknown, unknown>): StyledElement {return this._view._node;},enumerable: true,configurable: true,});Object.defineProperty(StyleAnimator.prototype, "names", {get: function (this: StyleAnimator<ElementView, unknown, unknown>): string | ReadonlyArray<string> {return this._names;},enumerable: true,configurable: true,});Object.defineProperty(StyleAnimator.prototype, "priority", {get: function (this: StyleAnimator<ElementView, unknown, unknown>): string | undefined {return this._priority;},set: function (this: StyleAnimator<ElementView, unknown, unknown>, value: string | undefined): void {this._priority = value;},enumerable: true,configurable: true,});Object.defineProperty(StyleAnimator.prototype, "propertyValue", {get: function (this: StyleAnimator<ElementView, unknown, unknown>): string | null {const style = this._view._node.style;const names = this._names;if (typeof names === "string") {return style.getPropertyValue(names);} else {for (let i = 0, n = names.length; i < n; i += 1) {const value = style.getPropertyValue(names[i]);if (value) {return value;}}return "";}},enumerable: true,configurable: true,});StyleAnimator.prototype.setState = function <V extends ElementView, T, U>(this: StyleAnimator<V, T, U>,state: T | null | undefined, tween?: Tween<T>,priority?: string | null): void {if (typeof priority === "string") {this.priority = priority;} else if (priority === null) {this.priority = void 0;}_super.prototype.setState.call(this, state, tween);};StyleAnimator.prototype.update = function <V extends ElementView, T, U>(this: StyleAnimator<V, T, U>,newValue: T, oldValue: T): void {if (!Objects.equal(oldValue, newValue)) {this.willUpdate(newValue, oldValue);const names = this._names;if (typeof names === "string") {this._view.setStyle(names, newValue, this.priority);} else {for (let i = 0, n = names.length; i < n; i += 1) {this._view.setStyle(names[i], newValue, this.priority);}}this.didUpdate(newValue, oldValue);}};StyleAnimator.prototype.willUpdate = function <V extends ElementView, T, U>(this: StyleAnimator<V, T, U>,newValue: T, oldValue: T): void {// stub};StyleAnimator.prototype.didUpdate = function <V extends ElementView, T, U>(this: StyleAnimator<V, T, U>,newValue: T, oldValue: T): void {// stub};StyleAnimator.prototype.delete = function <V extends ElementView, T, U>(this: StyleAnimator<V, T, U>): void {const names = this._names;if (typeof names === "string") {this._view.setStyle(names, null);} else {for (let i = 0, n = names.length; i < n; i += 1) {this._view.setStyle(names[i], null);}}};return StyleAnimator;}(TweenFrameAnimator))

Const ViewScope

ViewScope: ViewScopeClass = (function (_super: typeof Object): ViewScopeClass {const ViewScope: ViewScopeClass = function <V extends View, T>(this: ViewScope<V, T> | undefined, view: V | ViewScopeDescriptor<T>,name?: string, state?: T | null, inherit?: string | null): ViewScope<V, T> | PropertyDecorator {if (this instanceof ViewScope) { // constructorlet _this: ViewScope<V, T> = function (state?: T | null): T | null | V {if (state === void 0) {return _this.state;} else {_this.setState(state);return _this._view;}} as ViewScope<V, T>;(_this as any).__proto__ = this;if (state === void 0) {state = null;}if (inherit === void 0) {inherit = null;}_this = _super.call(_this) || _this;_this._view = view as V;Object.defineProperty(_this, "name", {value: name,enumerable: true,configurable: true,});_this._state = state;_this._inherit = inherit;return _this;} else { // decoratorconst descriptor = view as ViewScopeDescriptor<T>;return View.decorateViewScope.bind(void 0, ViewScope, descriptor);}} as ViewScopeClass;__extends(ViewScope, _super);Object.defineProperty(ViewScope.prototype, "view", {get: function <V extends View, T>(this: ViewScope<V, T>): V {return this._view;},enumerable: true,configurable: true,});Object.defineProperty(ViewScope.prototype, "state", {get: function <V extends View, T>(this: ViewScope<V, T>): T | null {let state = this._state;if (state === null) {const inherit = this._inherit;if (inherit !== null) {let view = this._view.parentView;while (view) {const scope = (view as any)[inherit];if (scope instanceof ViewScope) {state = scope.state;break;}view = view.parentView;}}}return state;},enumerable: true,configurable: true,});ViewScope.prototype.setState = function <V extends View, T>(this: ViewScope<V, T>, newState: T | null): void {const oldState = this._state;if (!Objects.equal(oldState, newState)) {this._state = newState;this._view.didSetViewScope(this, newState, oldState);}};Object.defineProperty(ViewScope.prototype, "inherit", {get: function <V extends View, T>(this: ViewScope<V, T>): string | null {return this._inherit;},enumerable: true,configurable: true,});return ViewScope;}(Object))