Closed linspw closed 8 months ago
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
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,
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.