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.
- 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
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.
Note: These details are from earlier version. To be updated, in 2020.
-
Dragging of
SVG.NestedandSVG.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.
npm
Install the tools and dependencies (needed for running demos):
$ npm install
Run the tests:
$ npm test
The project has test cases that can be played with manually, or used for Cypress tests.
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.
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.
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.
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 - -
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
See Publish/README.md for details.
Alpha and beta snapshots are published under the next tag. Stable versions follow the normal versioning.
See:
TODO.md- GitHub Issues
for ways to help
- 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)