feat: add `offset` option to adjust the coordinate.

[linspw]

Description

This pull request adds the property to adjust the coordinate.

This is particularly useful in a context where the coordinate moves with the zoom, for example, in the video below: Screencast from 25-01-2024 16:09:45.webm

Linked Issues

Additional context

I have been using a pnpm patch in production for months. I am now bringing it into the main library in case it can help others in this context.

diff --git a/dist/index.d.mts b/dist/index.d.mts
index 68d1bc06eabba7ecaa641402f63f8e01dac28e77..9c43508f820c480679cb3eb0195fb4c9341d3212 100644
--- a/dist/index.d.mts
+++ b/dist/index.d.mts
@@ -111,6 +111,8 @@ interface Options {
      * @default true
      */
     coordinateTransform?: boolean;
+
+    coordinatePosition?: { x: number, y: number }
 }
 interface EventsMap {
     start: () => void;
diff --git a/dist/index.d.ts b/dist/index.d.ts
index 68d1bc06eabba7ecaa641402f63f8e01dac28e77..9c43508f820c480679cb3eb0195fb4c9341d3212 100644
--- a/dist/index.d.ts
+++ b/dist/index.d.ts
@@ -111,6 +111,8 @@ interface Options {
      * @default true
      */
     coordinateTransform?: boolean;
+
+    coordinatePosition?: { x: number, y: number }
 }
 interface EventsMap {
     start: () => void;
diff --git a/dist/index.global.js b/dist/index.global.js
index fbd7060a7b2916983530e9585149059ddd125aa6..70788ba6362d8deb8211f809961d0ff62388fd50 100644
--- a/dist/index.global.js
+++ b/dist/index.global.js
@@ -252,20 +252,21 @@
       return this.drauu.el;
     }
     getMousePosition(event) {
-      var _a, _b;
+      var _a, _b, _c;
       const el = this.drauu.el;
       const scale = (_a = this.drauu.options.coordinateScale) != null ? _a : 1;
+      const position = (_c = this.drauu.options.coordinatePosition) != null ? _c : { x: 0, y: 0};
       if (this.drauu.options.coordinateTransform === false) {
         const rect = this.drauu.el.getBoundingClientRect();
         return {
-          x: (event.pageX - rect.left) * scale,
-          y: (event.pageY - rect.top) * scale,
+          x: (event.pageX - rect.left - position.x) * scale,
+          y: (event.pageY - rect.top - position.y) * scale,
           pressure: event.pressure
         };
       } else {
         const point = this.drauu.svgPoint;
-        point.x = event.clientX;
-        point.y = event.clientY;
+        point.x = event.clientX - position.x;
+        point.y = event.clientY - position.y;
         const loc = point.matrixTransform((_b = el.getScreenCTM()) == null ? void 0 : _b.inverse());
         return {
           x: loc.x * scale,
diff --git a/dist/index.js b/dist/index.js
index 7f81439d56f8793f5b1f1fc8cdea741e5ab3b2cd..ee1a8bc5e1b6422220c7bf9e261d95835fe29189 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -280,20 +280,21 @@ var BaseModel = class {
     return this.drauu.el;
   }
   getMousePosition(event) {
-    var _a, _b;
+    var _a, _b, _c;
     const el = this.drauu.el;
     const scale = (_a = this.drauu.options.coordinateScale) != null ? _a : 1;
+    const position = (_c = this.drauu.options.coordinatePosition) != null ? _c : { x: 0, y: 0};
     if (this.drauu.options.coordinateTransform === false) {
       const rect = this.drauu.el.getBoundingClientRect();
       return {
-        x: (event.pageX - rect.left) * scale,
-        y: (event.pageY - rect.top) * scale,
+        x: (event.pageX - rect.left - position.x) * scale,
+        y: (event.pageY - rect.top - position.y) * scale,
         pressure: event.pressure
       };
     } else {
       const point = this.drauu.svgPoint;
-      point.x = event.clientX;
-      point.y = event.clientY;
+      point.x = event.clientX - position.x;
+      point.y = event.clientY - position.y;
       const loc = point.matrixTransform((_b = el.getScreenCTM()) == null ? void 0 : _b.inverse());
       return {
         x: loc.x * scale,
diff --git a/dist/index.mjs b/dist/index.mjs
index c4492dbead7d78fd0c25fa9b3b70320cf4770b17..1a6ae38e019e8622ec0bbb416484669bfa77113e 100644
--- a/dist/index.mjs
+++ b/dist/index.mjs
@@ -250,20 +250,21 @@ var BaseModel = class {
     return this.drauu.el;
   }
   getMousePosition(event) {
-    var _a, _b;
+    var _a, _b, _c;
     const el = this.drauu.el;
     const scale = (_a = this.drauu.options.coordinateScale) != null ? _a : 1;
+    const position = (_c = this.drauu.options.coordinatePosition) != null ? _c : { x: 0, y: 0};
     if (this.drauu.options.coordinateTransform === false) {
       const rect = this.drauu.el.getBoundingClientRect();
       return {
-        x: (event.pageX - rect.left) * scale,
-        y: (event.pageY - rect.top) * scale,
+        x: (event.pageX - rect.left - position.x) * scale,
+        y: (event.pageY - rect.top - position.y) * scale,
         pressure: event.pressure
       };
     } else {
       const point = this.drauu.svgPoint;
-      point.x = event.clientX;
-      point.y = event.clientY;
+      point.x = event.clientX - position.x;
+      point.y = event.clientY - position.y;
       const loc = point.matrixTransform((_b = el.getScreenCTM()) == null ? void 0 : _b.inverse());
       return {
         x: loc.x * scale,