manipulate-my-image v0.0.3

Manipulate My Image (MMI)

Manipulate My Image (MMI) is an easy-to-use image-manipulation directive that can be easily pulled into any new or existing Angular 2 solution. To use this library, place the "manipulate-img" directive name into your target element, like <img src="myimage.png" height="500px" width="500px" manipulate-img />

The guiding vision for this library is to have an unopinionated tool that makes as few assumptions of the surrounding context as possible. This library is currently in alpha as features are still underway, and testing has been minimal thus far. I'll try to triage and fix issues as quickly as possible, when they are reported. Technically, this library may also work on non-image elements (text fields, divs, etc.), but testing does not currently cover non-image elements.

Current Features:

1. Zoom-In - Enlarges the Image, focused on where the user clicked within the element
2. Zoom-Out - Shrinks the Image, retaining centered-focus on where the user clicked with the element. The element cannot be shrunk below its parent-container\' dimensions.
3. Reset Image - Resets the image element to match the dimensions of its parent container

Future Features:

1. Configuration of keybindings and other directive settings
2. Contrast
3. Brightness
4. Shifting Images via keyboard
5. Test Sets

Assumptions:

The MMI directive does make a few assumptions about its context, that cannot be avoided without making the library more opinionated than it should be.

The largest assumption is that the image element will always take 100% of its parent-containers dimensions. This means that if you do not want the image element to take 100% of an area, you will have to place the image-to-manipulate in a container, and size the container to match your use-case.

For example:

```
<img src="myimage.png" height="500px" width="500px" manipulate-img />
```

will take up 100% of the parent container, regardless of the height and width styles.

To make this img have a 500px height and width, you'd need to change this to:

```
<div class="parent" width="500px" height="500px">
	<img src="myimage.png" manipulate-img />
</div>
```

Same rule applies for percents and other metrics.

The second assumption, is that the keybindings are currently hardcoded:

1. Pressing the spacebar while the element is focused or left-clicking the element will zoom in
2. Pressing Ctrl + spacebar while the element is focused or right-clicking the element will zoom out
3. resetImg() is the exposed interface for resetting the image size

If a keypress is used to zoom in or zoom out, the center of parent element is used as the default coordinate points to zoom in/out