cyclejs-community/cycle-svg-pan-and-zoom

Name: cycle-svg-pan-and-zoom

Owner: Cycle.js Community

Description: A Google Maps style SVG pan and zoom component for Cycle.js

Created: 2016-10-30 07:03:56.0

Updated: 2017-06-11 10:32:38.0

Pushed: 2016-11-05 01:56:36.0

Homepage: null

Size: 160

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

cycle-svg-pan-and-zoom

A Google Maps style SVG pan and zoom component for Cycle.js

cycle-svg-pan-and-zoom is a component for Cycle.js that allows you to pan by clicking and dragging, and to zoom with the mouse.

Currently xstream only, although a pull-request to support other stream libraries is welcome.

Usage

First we need to import the component:

rt SvgPanAndZoom from 'cycle-svg-pan-and-zoom';

We also need the h hyperscript helper from @cycle/dom to make SVG elements.

rt {h} from '@cycle/dom';

Then, inside of our main, we set up our SVG:

tion main ({DOM}) {
nst children$ = xs.of([
h('text', {attrs: {x: 100, y: 100}}, 'hello world')
;

nst svg = SvgPanAndZoom({DOM, children$});

turn {
DOM: svg.DOM

API

SvgPanAndZoom({DOM, children$, attrs$})

Returns a sinks object with a DOM stream, where the top level element is the svg.

• DOM (required) - the @cycle/dom source
• children$ (required) - a stream, where each item is an array of hyperscript SVG elements
• attrs$ (optional) - a stream of objects that will be used as attrs for the svg element. useful for setting width and height

Install

With npm installed, run

m install cycle-svg-pan-and-zoom --save

Contributing

Contributions are extremely welcome. Please feel free to open an issue or pull request, or to ask any questions.

License

MIT