@swim/toolkit NPM

@swim/toolkit

The @swim/toolkit umbrella framework provides a set of frameworks for building pervasively real-time user interface applications. @swim/toolkit incorporates the @swim/ui real-time user interface toolkit, the @swim/vis and @swim/maps real-time widget toolkits, and the @swim/web real-time web application framework.

Umbrella Framework

The Swim Toolkit umbrella framework builds on the Swim Core framework, and provides the following top-level libraries:

@swim/toolkit (npm, doc) – umbrella package that depends on, and re-exports, all Swim Toolkit child frameworks and libraries.

Swim UI Framework

The Swim UI framework implements a user interface toolkit for pervasively real-time applications. A unified view hierarchy, with builtin procedural styling and animation, makes it easy for Swim UI components to uniformly style, animate, and render mixed HTML, SVG, Canvas, and WebGL components.

@swim/ui (npm, doc) – pervasively real-time user interface toolkit, with a unified view hierarchy for HTML, SVG, and Canvas components, animated procedural styling, and constraint-based layouts.
@swim/angle (npm, doc) – dimensional angle types with unit-aware algebraic operators, conversions, and parsers.
@swim/length (npm, doc) – DOM-relative length types with unit-aware algebraic operators, conversions, and parsers.
@swim/color (npm, doc) – RGB and HSL color types with color-space-aware operators, conversions, and parsers.
@swim/font (npm, doc) – CSS font property types and parsers.
@swim/shadow (npm, doc) – CSS box shadow types and parsers.
@swim/transform (npm, doc) – CSS and SVG compatible transform types with unit-aware algebraic operators and parsers.
@swim/scale (npm, doc) – scale types that map numeric and temporal input domains to interpolated output ranges, with support for continuous domain clamping, domain solving, range unscaling, and interpolation between scales.
@swim/transition (npm, doc) – transition types that specify duration, ease, interpolator, and lifecycle callback parameters for tween animations.
@swim/animate (npm, doc) – property-managing animator types that efficiently tween values between discrete state changes.
@swim/style (npm, doc) – CSS style types and universal style value parser.
@swim/render (npm, doc) – renderable graphic types for SVG and Canvas compatible path drawing contexts, and Canvas compatible rendering contexts.
@swim/constraint (npm, doc) – incremental solver for systems of linear layout constraints.
@swim/view (npm, doc) – unified HTML, SVG, and Canvas view hierarchy, with integrated controller architecture, animated procedural styling, and constraint-based layouts.
@swim/shape (npm, doc) – canvas shape views, with animated geometry and style properties.
@swim/typeset (npm, doc) – canvas typesetting views, with animated text, layout, font, and style properties.
@swim/gesture (npm, doc) – multitouch gesture recognizers, with kinematic surface modeling.

Swim UX Framework

The Swim UX framework implements a user interface framework for advanced real-time applications. Swim UX provides popovers, drawers, menus, toolbars, controls, and other interactive application views and controllers. Swim UX consists of the following component libraries:

@swim/ux (npm, doc) – thin web application framework built on the @swim/ui toolkit.
@swim/theme (npm, doc) – semantic looks and feels for mood-aware UX components.
@swim/app (npm, doc) – application model for coordinating window-level components, such as popovers and drawers.
@swim/controls (npm, doc) – buttons, switches, sliders, and other user interface controls.
@swim/navigation (npm, doc) – menus, tree views, nav bars, tab bars, and other user interface navigation components.

Swim Visualizations Framework

The Swim Visualizations framework implements seamlessly animated diagram widgets, including gauges, pie charts, and line, area, and bubble charts. Swim Visualizations consists of the following component libraries:

@swim/vis (npm, doc) – procedurally animated, interactive diagrams, including gauges, pie charts, and line, area, and bubble charts.
@swim/gauge (npm, doc) – multi-dial, fully animatable, canvas rendered gauge widget.
@swim/pie (npm, doc) – multi-slice, fully animatable, canvas rendered pie chart widget.
@swim/chart (npm, doc) – multi-plot, fully animatable, canvas rendered chart widget, suppporting line, area, and bubble graphs, with customizeable axes, and kinematic multitouch scale gestures for panning and zooming with momentum.

Swim Maps Framework

The Swim Maps framework implements real-time geospatial map overlays, with support for Mapbox, Google, and Esri maps. Swim Maps consists of the following component libraries:

@swim/maps (npm, doc) – real-time geospatial map overlays, with support for Mapbox, Google, and Esri maps.
@swim/map (npm, doc) – canvas views for efficiently rendering geospatially located map overlays, including fully animatable views for lines, circles, and polygons.
@swim/mapbox (npm, doc) – support for overlaying @swim/map views on Mapbox maps.
@swim/googlemap (npm, doc) – support for overlaying @swim/map views on Google maps.
@swim/esrimap (npm, doc) – support for overlaying @swim/map views on ArcGIS maps.

Swim Web Framework

The Swim Web framework implements a thin web application framework built on the Swim UI toolkit. Swim Web consists of the following component libraries:

@swim/web (npm, doc) – thin web application framework built on the @swim/ui toolkit.
@swim/website (npm, doc) – minimalist components that implement common dynamic website behaviors.
@swim/webapp (npm, doc) – lightweight web application loader that dynamically instantiates views and controllers declared by swim- HTML attributes.

Installation

npm

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

Browser

Browser applications can load swim-toolkit.js, along with its swim-system.js dependency, from the SwimOS CDN. The swim-toolkit.js bundle supersedes swim-ui.js, swim-vis.js, swim-maps.js, and swim-web.js—those scripts need not be loaded when using swim-toolkit.js.

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

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

Usage

ES6/TypeScript

@swim/toolkit can be imported as an ES6 module from TypeScript and other ES6-compatible environments. All child framework libraries are re-exported by the umbrella @swim/toolkit module.

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

CommonJS/Node.js

@swim/toolkit can also be used with CommonJS-compatible module systems. All component libraries are re-exported by the umbrella @swim/toolkit module.

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

Browser

When loaded by a web browser, the swim-tookit.js script adds all child framework exports to the global swim namespace. The swim-toolkit.js script requires that either swim-core.js or swim-system.js has already been loaded.