Added template helper methods

Fixes #66

docs/en/advanced-usage.md

@@ -11,20 +11,22 @@ A small catch is that you can't include regular (non FocusPoint) cropping method
 When images are cropped/framed on the front-end of a website, you can pass through FocusPoint data to ensure the important part of your image is preserved.
 
 ### jQuery FocusPoint
-[jQuery FocusPoint ](https://github.com/jonom/jquery-focuspoint) allows you to fill a flexible container with your image, while always retaining the most important part. Check out a [demo here](http://jonom.github.io/jquery-focuspoint/demos/grid/lizard.html). Example integration:
+[jQuery FocusPoint ](https://github.com/jonom/jquery-focuspoint) allows you to fill a flexible container with your image, while always retaining the most important part. Check out a [demo here](http://jonom.github.io/jquery-focuspoint/demos/grid/lizard.html). Example v1 integration:
 
 ```html
 <% with $SomeImage %>
 	<div class="focuspoint"
-		data-focus-x="$FocusPoint.X"
-		data-focus-y="$FocusPoint.Y"
+		data-focus-x="$FocusPoint.LegacyX"
+		data-focus-y="$FocusPoint.LegacyY"
 		data-image-w="$Width"
 		data-image-h="$Height">
 		<img src="$Link" alt="" />
 	</div>
 <% end_with %>
 ```
 
+For v2, just replace `LegacyX` and `LegacyY` with `OffsetX` and `OffsetY`.
+
 ### Background image with focus point preserved
 
 Try something like this to get a full-screen background image that preserves your focus point as you resize the browser window.

src/FieldType/DBFocusPoint.php

@@ -35,7 +35,7 @@ class DBFocusPoint extends DBComposite
     /**
      * Focus X
      *
-     * @return double Decimal number between -1 & 1, where -1 is far left, 0 is center, 1 is far right.
+     * @return float Decimal number between -1 & 1, where -1 is far left, 0 is center, 1 is far right.
      */
     public function getX(): float
     {
@@ -318,4 +318,44 @@ public function PercentageY(): int
     {
         return intval(round(DBFocusPoint::focusCoordToOffset($this->getY()) * 100));
     }
+
+    /**
+     * Legacy X (Focus X in legacy coordinate system)
+     *
+     * @return float Decimal number between -1 & 1, where -1 is far left, 0 is center, 1 is far right.
+     */
+    public function LegacyX(): float
+    {
+        return $this->getX();
+    }
+
+    /**
+     * Legacy Y (Focus Y in legacy coordinate system)
+     *
+     * @return float Decimal number between -1 & 1, where -1 is bottom, 0 is center, 1 is top.
+     */
+    public function LegacyY(): float
+    {
+        return $this->getY() == 0 ? 0 : $this->getY() * -1;
+    }
+
+    /**
+     * Offset X (Focus X in web coordinate system)
+     *
+     * @return float Decimal number between 0 & 1, where 0 is far left, 0.5 is center, 1 is far right.
+     */
+    public function OffsetX(): float
+    {
+        return DBFocusPoint::focusCoordToOffset($this->getX());
+    }
+
+    /**
+     * Offset Y (Focus Y in web coordinate system)
+     *
+     * @return float Decimal number between 0 & 1, where 0 is top, 0 .5 is center, 1 is bottom.
+     */
+    public function OffsetY(): float
+    {
+        return DBFocusPoint::focusCoordToOffset($this->getY());
+    }
 }