Skip to content

Commit

Permalink
⬆️ 1.1.1 🎉
Browse files Browse the repository at this point in the history
 - Fix dragging on zoomed viewbox
 - Improved docs.
 - Added CONTRIBUTING.md
 - Added JSON docs.
 - Generate docs using blah.
  • Loading branch information
IonicaBizau committed Apr 11, 2016
1 parent e884529 commit d24f840
Show file tree
Hide file tree
Showing 5 changed files with 279 additions and 40 deletions.
2 changes: 1 addition & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@
*.swo
*~
*.log
node_modules
node_modules
64 changes: 64 additions & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
# :eight_spoked_asterisk: :stars: :sparkles: :dizzy: :star2: :star2: :sparkles: :dizzy: :star2: :star2: Contributing :star: :star2: :dizzy: :sparkles: :star: :star2: :dizzy: :sparkles: :stars: :eight_spoked_asterisk:

So, you want to contribute to this project! That's awesome. However, before
doing so, please read the following simple steps how to contribute. This will
make the life easier and will avoid wasting time on things which are not
requested. :sparkles:

## Discuss the changes before doing them
- First of all, open an issue in the repository, using the [bug tracker][1],
describing the contribution you would like to make, the bug you found or any
other ideas you have. This will help us to get you started on the right
foot.

- If it makes sense, add the platform and software information (e.g. operating
system, Node.JS version etc.), screenshots (so we can see what you are
seeing).

- It is recommended to wait for feedback before continuing to next steps.
However, if the issue is clear (e.g. a typo) and the fix is simple, you can
continue and fix it.

## Fixing issues
- Fork the project in your account and create a branch with your fix:
`some-great-feature` or `some-issue-fix`.

- Commit your changes in that branch, writing the code following the
[code style][2]. If the project contains tests (generally, the `test`
directory), you are encouraged to add a test as well. :memo:

- If the project contains a `package.json` or a `bower.json` file add yourself
in the `contributors` array (or `authors` in the case of `bower.json`;
if the array does not exist, create it):

```json
{
"contributors": [
"Your Name <[email protected]> (http://your.website)"
]
}
```

## Creating a pull request

- Open a pull request, and reference the initial issue in the pull request
message (e.g. *fixes #<your-issue-number>*). Write a good description and
title, so everybody will know what is fixed/improved.

- If it makes sense, add screenshots, gifs etc., so it is easier to see what
is going on.

## Wait for feedback
Before accepting your contributions, we will review them. You may get feedback
about what should be fixed in your modified code. If so, just keep committing
in your branch and the pull request will be updated automatically.

## Everyone is happy!
Finally, your contributions will be merged, and everyone will be happy! :smile:
Contributions are more than welcome!

Thanks! :sweat_smile:

[1]: https://github.com/jillix/svg.draggy.js/issues

[2]: https://github.com/IonicaBizau/code-style
4 changes: 1 addition & 3 deletions LICENSE
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
The MIT License (MIT)

Copyright (c) 2014 Wout Fierens
Copyright (c) 2014 Florian Loch
Copyright (c) 2014-15 jillix
Copyright (c) 2012-16 jillix <[email protected]>

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
76 changes: 43 additions & 33 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
# svg.draggy.js
A JavaScript library for dragging SVG things.
# svg.draggy.js [![Version](https://img.shields.io/npm/v/svg.draggy.js.svg)](https://www.npmjs.com/package/svg.draggy.js) [![Downloads](https://img.shields.io/npm/dt/svg.draggy.js.svg)](https://www.npmjs.com/package/svg.draggy.js)

[![](http://i.imgur.com/tXn2w8f.jpg)](http://jillix.github.io/svg.draggy.js/)
> A JavaScript library for dragging SVG things.
## Usage

Include this library after including `svg.js` in your html document. [Here you can see a demo](http://jillix.github.io/svg.draggy.js/).

To make an element draggable, just do:
Expand All @@ -17,41 +17,39 @@ rect.draggy();

Yes indeed, that's it! Now the `rect` is draggable. :sparkles:

### Events
## Events

There are four different events available you can llisten to: `beforedrag`, `dragstart`, `dragmove` and `dragend`. This is how you assign them:

The `event` object has some custom data added by this library:

- `event.detail.delta` is an object containing:
- `x` and `y`: The element coordinates.
- `movedX` and `movedY`: The element total movement values (available only in `dragmove` event).

- `x` and `y`: The element coordinates.
- `movedX` and `movedY`: The element total movement values (available only in `dragmove` event).

- `event.detail.event` is an object containing the original event

#### `dragstart`

```js
rect.on("dragstart", function(event) {
rect.on('dragstart', function(event) {
// Do something
});
```

#### `beforedrag`

```js
rect.on("beforedrag", function(event) {
rect.on('beforedrag', function(event) {
// Do something
});
```

#### `dragmove`

```js
rect.on("dragmove", function(event) {
rect.on('dragmove', function(event) {
// Do something
});
```

### Constraint

The drag functionality can be limited within a given box. You can pass the the constraint values as an object:

```js
Expand Down Expand Up @@ -84,24 +82,37 @@ rect.draggy(function (x, y, elem) {
return res;
});
```
### Remove


## Remove
The draggable functionality can be removed with the `fixed()` method:

```js
rect.fixed();
```


### Viewbox

This plugin is viewBox aware but there is only one thing that you need to keep in mind. If you work with a viewBox on the parent element you need to set the width and height attributes to have the same aspect ratio. So let's say you are using `viewbox='0 0 150 100'` you have to make sure the aspect ratio of `width` and `height` is the same:

```js
var draw = SVG('paper').attr('viewBox', '0 0 150 100').size(600, 400);
```

## Documentation
[![svg.draggy.js](http://i.imgur.com/tXn2w8f.jpg)](http://jillix.github.io/svg.draggy.js/)

## :cloud: Installation


Check out the [`src`](/src) directory to download the needed files and include them on your page.

If you're using this module in a CommonJS environment, you can install it from `npm` and `require` it:

```sh
$ npm i --save svg.draggy.js
```

## :memo: Documentation
### `draggy(constraint)`
Makes an element draggable.

Expand All @@ -113,16 +124,15 @@ boolean values.`false` skips moving while `true` allows it.
#### Return
- **SVG** The SVG element.


## How to contribute
1. File an issue in the repository, using the bug tracker, describing the
contribution you'd like to make. This will help us to get you started on the
right foot.
2. Fork the project in your account and create a new branch:
`your-great-feature`.
3. Commit your changes in that branch.
4. Open a pull request, and reference the initial issue in the pull request
message.

## License
See the [LICENSE](./LICENSE) file.
## :yum: How to contribute
Have an idea? Found a bug? See [how to contribute][contributing].

## :scroll: License

[MIT][license] © [jillix][website]

[license]: http://showalicense.com/?fullname=jillix%20%3Ccontact%40jillix.com%3E&year=2012#license-mit
[website]:
[contributing]: /CONTRIBUTING.md
[docs]: /DOCUMENTATION.md
Loading

0 comments on commit d24f840

Please sign in to comment.