https://github.com/movableink/free-transform-example

How to implement free transforms in Ember. Check out the branches for the various stages.
https://github.com/movableink/free-transform-example

Last synced: 6 months ago
JSON representation

How to implement free transforms in Ember. Check out the branches for the various stages.

• Host: GitHub
• URL: https://github.com/movableink/free-transform-example
• Owner: movableink
• License: mit
• Created: 2015-02-23T05:28:20.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2015-03-02T22:09:07.000Z (about 10 years ago)
• Last Synced: 2024-04-15T12:29:04.315Z (about 1 year ago)
• Language: JavaScript
• Size: 4.43 MB
• Stars: 10
• Watchers: 9
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Free Transform with Ember.js

Watch the talk at EmberNYC for context: ([slides](http://movableink.github.io/free-transform-example))

[![Watch the talk at EmberNYC](http://movableink.github.io/free-transform-example/images/youtube.png)](https://www.youtube.com/watch?v=gRpz5SZ7b7Q#t=2550)

This is an exploration of how to build a free transform component in Ember, in four parts:

1. Drag and drop movement: ![screencast-1](http://movableink.github.io/free-transform-example/gifs/transform-1.gif)

2. Resize via corner handles: ![screencast-2](http://movableink.github.io/free-transform-example/gifs/transform-2.gif)

3. Multi-select: ![screencast-3](http://movableink.github.io/free-transform-example/gifs/transform-3.gif)

4. Edge guides: ![screencast-4](http://movableink.github.io/free-transform-example/gifs/transform-4.gif)

## Shameless plug

Would you like to build stuff like this with us at Movable Ink? [We're hiring](http://movableink.com/careers?gh_jid=41159)!

## Prerequisites

You will need the following things properly installed on your computer.

* [Git](http://git-scm.com/)

* [Node.js](http://nodejs.org/) (with NPM)

* [Bower](http://bower.io/)

* [Ember CLI](http://www.ember-cli.com/)

## Installation

* `git clone git://github.com/movableink/free-transform-example`

* change into the new directory

* `npm install`

* `bower install`

## Running / Development

* `ember server`

* Visit your app at [http://localhost:4200](http://localhost:4200).

## Examples

Each example is in its own branch. (`master` includes all of the code) So if you want to see the progression, you can `git checkout` `example-1`, `example-2`, `example-3`, and `example-4`.

## License

See LICENSE.