svg.rx.js

What is it?

svg.rx.js binds RxJS together with SVG graphics. It's intended for Svelte 3 applications, but is published as a plain node.js browser-targeted library.

With svg.rx.js, you can:

• follow touch and mouse events on SVG graphic components, as an RxJS Observable, tremendously simplifying the code concerned.
• forget about most of conversions needed in the process

The end game is to get a simple programming paradigm for making SVG-only animated, interactive applications that run fast in the browser. This programming model was pioneered by (at least) Asymetrix Toolbook (1990-), Macromedia/Adobe Flash (~1996-2020), and maybe originates in HyperCard (1987-).

The reasons why this isn't already practical lie within the SVG details and simply missing workflows.

Design goals

• touch and mouse should not seem very different
• touch first (treat mouse as a useable fallback 2nd class citizen)
• any touch is treated the same (enables multiuser touch on a big tablet/table)

Implementation details:

• every documented API must have unit tests
• value brewity of the code, and maintainability

Platform scope

Scope of the project is SVG on modern "evergreen" browsers. That probably means no IE9..10 support (IE11 support can be added, if needed). In practice the code gets tested on:

• Latest Safari on macOS
• Latest Chrome on macOS
• Safari on iOS 13 (iPad Pro)
• Chrome on Android 9/10 (Sony Xperia phone)

If you find platforms where it doesn't work for you, issues and pull requests are the way to go.

Not supported

Note: These details are from earlier version. To be updated, in 2020.

• Dragging of SVG.Nested and SVG.Text

  • there is special code for these in the svg.draggable.js project but since we don't have demos for these, we are currently not supporting them, at all

• Changing the draggable object's conversion matrix (scaling, rotation and translation) during a drag.

  • this is probably not needed in practical applications

Please send a PR if you need these - and provide a demo or test that proves when the support works.

---

Requirements

• npm

Getting started

Install the tools and dependencies (needed for running demos):

$ npm install

Run the tests:

$ npm test

Running tests

The project has test cases that can be played with manually, or used for Cypress tests.

Test cases - bare

You can open a test page manually:

$ npm run test:dev

This builds a test page and serves it at http://localhost:3000. If you edit the test source, changes are immediately shown in the browser. Use this for developing the test cases.

Running on a mobile device

While test:dev is served, open the mobile device's browser at http://192.168.1.234:3000 (IP mentioned by npm run test:dev).

This allows you to experiment with the demos.

For setting up remote debugging, see DEV-TIPS/Remote debugging.

Test cases - with Cypress UI

The test cases have unit tests written in Cypress (disclaimer: Cypress is not for unit tests - I know).

$ npm run cy:open

This opens the tests in Cypress, a test maniac.

You can select the browser from the top right, then run a certain test suite or "Run all specs".

The tests run in a separate browser window:

The nice thing about Cypress is you can time travel through the tests, seeing exactly what was going on in the browser.

Test cases in command line

The same tests can be run on the command line, by:

$ npm cy:run
...
       Spec                                              Tests  Passing  Failing  Pending  Skipped  
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ ✖  abc.spec.js                              00:01        1        -        1        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    ✖  1 of 1 failed (100%)                     00:01        1        -        1        -        -  

npm link

For using svg.rx.js in another npm project on the same machine, you don't need publishing. This is handy for e.g. development of the svg.rx.js-demo application.

In the downstream app:

$ npm link ../svg.rx.js

Publishing to npm registry

See Publish/README.md for details.

Alpha and beta snapshots are published under the next tag. Stable versions follow the normal versioning.

Help requested!!

See:

• TODO.md
• GitHub Issues

for ways to help

---

References

• How to Use npm as a Build Tool - (blog, Dec 2014) by Keith Cirkel
• End to End Testing a Web Application using Cypress (Youtube 20:40, Apr 2019)