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 Swim CDN.

<script src="https://cdn.swim.ai/js/latest/swim-core.js"></script>
<script src="https://cdn.swim.ai/js/latest/swim-ui.js"></script>

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

<script src="https://cdn.swim.ai/js/latest/swim-system.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: StringConstructor | BooleanConstructor | NumberConstructor | Length | Color | Transform | [NumberConstructor, StringConstructor] | [Length, StringConstructor] | [Color, StringConstructor]

MemberAnimatorInherit

MemberAnimatorInherit: "inherit" | string | null

MemberAnimatorType

MemberAnimatorType: FromAny<any> | ObjectConstructor | StringConstructor | BooleanConstructor | NumberConstructor | Angle | Length | Color | Font | Transform

PopoverPlacement

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

PopoverState

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

StyleAnimatorType

StyleAnimatorType: StringConstructor | NumberConstructor | Length | Color | object | object | Transform | BoxShadow | [NumberConstructor, StringConstructor] | [Length, StringConstructor] | [Color, StringConstructor]

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 {// stub};AttributeAnimator.prototype.didUpdate = function <V extends ElementView, T, U>(this: AttributeAnimator<V, T, U>,newValue: T, oldValue: T): void {// stub};AttributeAnimator.prototype.delete = function <V extends ElementView, T, U>(this: AttributeAnimator<V, T, U>): void {this._view._node.removeAttribute(this._name);};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 | AnyConstraintStrength,name?: string, value?: number, strength?: ConstraintStrength): 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;_this = _super.call(_this, scope as S, name!, value!, strength!) || _this;_this._enabled = false;return _this;} else { // decoratorstrength = ConstraintStrength.fromAny(scope as AnyConstraintStrength);return View.decorateLayoutAnchor.bind(void 0, LayoutAnchor, 0, strength);}} 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;}};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 | MemberAnimatorType | unknown,value?: T | null | string, transition?: Transition<T> | null,inherit?: MemberAnimatorInherit): MemberAnimator<V, T, U> | PropertyDecorator {if (this instanceof MemberAnimator) { // constructorif (transition === void 0) {transition = null;}const _this = _super.call(this, value, transition) || this;_this._view = view;_this._inherit = inherit !== void 0 ? inherit : null;return _this;} else { // decoratorconst type = view as MemberAnimatorType;inherit = value as MemberAnimatorInherit | undefined;if (type === Object) {return View.decorateMemberAnimator.bind(void 0, MemberAnimator.Object, inherit);} else if (type === String) {return View.decorateMemberAnimator.bind(void 0, MemberAnimator.String, inherit);} else if (type === Boolean) {return View.decorateMemberAnimator.bind(void 0, MemberAnimator.Boolean, inherit);} else if (type === Number) {return View.decorateMemberAnimator.bind(void 0, MemberAnimator.Number, inherit);} else if (type === Angle) {return View.decorateMemberAnimator.bind(void 0, MemberAnimator.Angle, inherit);} else if (type === Length) {return View.decorateMemberAnimator.bind(void 0, MemberAnimator.Length, inherit);} else if (type === Color) {return View.decorateMemberAnimator.bind(void 0, MemberAnimator.Color, inherit);} else if (type === Font) {return View.decorateMemberAnimator.bind(void 0, MemberAnimator.Font, inherit);} else if (type === Transform) {return View.decorateMemberAnimator.bind(void 0, MemberAnimator.Transform, inherit);} else if (FromAny.is(type)) {return View.decorateMemberAnimator.bind(void 0, MemberAnimator.Any.bind(void 0, type), inherit);}throw new TypeError("" + type);}} 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>): MemberAnimatorInherit {return this._inherit;},enumerable: true,configurable: true,});Object.defineProperty(MemberAnimator.prototype, "dirty", {get: function <V extends AnimatedView, T, U>(this: MemberAnimator<V, T, U>): boolean {return this._view.dirty;},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.setDirty = function <V extends AnimatedView, T, U>(this: MemberAnimator<V, T, U>,dirty: boolean): void {if (dirty) {this._view.setDirty(dirty);}};MemberAnimator.prototype.animate = function <V extends AnimatedView, T, U>(this: MemberAnimator<V, T, U>): void {if (!this._disabled) {this._view.animate();}};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 {if (!Objects.equal(oldValue, newValue)) {this.setDirty(true);}};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 style = this._view._node.style;const names = this._names;if (typeof names === "string") {style.removeProperty(names);} else {for (let i = 0, n = names.length; i < n; i += 1) {style.removeProperty(names[i]);}}};return StyleAnimator;}(TweenFrameAnimator))