UNPKG

referentiel

Version:

Convert position relative to a html element.

github.com/ombr/referentiel

ombr/referentiel

68 lines (64 loc) • 16 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
/* * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development"). * This devtool is neither made for production nor for readable output files. * It uses "eval()" calls to create a separate source file in the browser devtools. * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/) * or disable the default devtool with "devtool: false". * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/). */ var Referentiel; /******/ (() => { // webpackBootstrap /******/ "use strict"; /******/ var __webpack_modules__ = ({ /***/ "./dist/referentiel.js": /*!*****************************!*\ !*** ./dist/referentiel.js ***! \*****************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"Referentiel\": () => (/* binding */ Referentiel)\n/* harmony export */ });\nvar __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nvar __metadata = (undefined && undefined.__metadata) || function (k, v) {\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(k, v);\n};\nvar __spreadArray = (undefined && undefined.__spreadArray) || function (to, from, pack) {\n if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n if (ar || !(i in from)) {\n if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n ar[i] = from[i];\n }\n }\n return to.concat(ar || Array.prototype.slice.call(from));\n};\nfunction cache(_target, propertyKey, descriptor) {\n var cacheKey = \"_\".concat(propertyKey);\n if (!descriptor)\n return;\n var originalMethod = descriptor.value;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n descriptor.value = function () {\n // eslint-disable-next-line no-prototype-builtins\n if (this.hasOwnProperty(cacheKey)) {\n return this[cacheKey];\n }\n this[cacheKey] = originalMethod.apply(this, []);\n return this[cacheKey];\n };\n}\nvar Referentiel = /** @class */ (function () {\n function Referentiel(reference, offsetParent) {\n if (offsetParent === void 0) { offsetParent = null; }\n this.reference = reference;\n this.offsetParent = offsetParent;\n }\n Referentiel.convertPointFromPageToNode = function (node, point) {\n var referenciel = new Referentiel(node);\n return referenciel.convertPointFromPageToNode(point);\n };\n Referentiel.prototype.convertPointFromPageToNode = function (point) {\n return this.globalToLocal(point);\n };\n Referentiel.prototype.globalToLocal = function (point) {\n return Referentiel.multiplyPoint(this.matrixInv(), point);\n };\n Referentiel.prototype.localToGlobal = function (point) {\n return Referentiel.multiplyPoint(this.matrix(), point);\n };\n Referentiel.multiplyPoint = function (m, point) {\n var res = Referentiel.multiply(m, [\n [point[0], 0, 0],\n [point[1], 0, 0],\n [1, 0, 0],\n ]);\n return [\n Referentiel.exportNumber(res[0][0]),\n Referentiel.exportNumber(res[1][0]),\n ];\n };\n Referentiel.exportNumber = function (v) {\n return parseFloat(v.toString());\n };\n Referentiel.prototype._round = function (value) {\n var precision = 1000000.0;\n return Math.round(precision * value) / precision;\n };\n Referentiel.prototype.matrixInv = function () {\n return Referentiel.inv(this.matrix());\n };\n Referentiel.prototype.matrix = function () {\n var matrixLocale = this.matrixLocale();\n if (this.css(\"position\") === \"fixed\") {\n return matrixLocale;\n }\n var parent = this.parent(this.reference);\n if (parent) {\n return Referentiel.multiply(new Referentiel(parent, Referentiel.offsetParent(this.reference)).matrix(), matrixLocale);\n }\n return matrixLocale;\n };\n Referentiel.offsetParent = function (node) {\n if (node instanceof HTMLElement) {\n return node.offsetParent;\n }\n return null;\n };\n Referentiel.prototype.matrixLocale = function () {\n return Referentiel.mult(this.matrixSVGViewbox(), this.matrixOffset(), this.matrixTransformOrigin(), this.matrixTransform(), Referentiel.inv(this.matrixTransformOrigin()), this.matrixBorder(), this.matrixScroll());\n };\n Referentiel.prototype.matrixTransform = function () {\n if (!(this.reference instanceof Element))\n return Referentiel.identity();\n var transform = this.reference.getAttribute(\"transform\") || \"none\";\n if (this.reference instanceof HTMLElement &&\n !transform.match(/^matrix\\((.*)\\)$/)) {\n transform = this.reference.style.transform;\n }\n if (!transform.match(/^matrix\\((.*)\\)$/)) {\n transform = this.css(\"transform\");\n }\n var res = transform.match(/^matrix\\((.*)\\)$/);\n if (!res || !res[1]) {\n return Referentiel.identity();\n }\n var floatsStr = res[1].replace(\",\", \" \").replace(\" \", \" \").split(\" \");\n if (floatsStr.length !== 6)\n throw new Error(\"Transform matrix error\");\n var floats = floatsStr.map(function (e) {\n return parseFloat(e);\n }); //! TODO We should do better here.\n return [\n [floats[0], floats[2], floats[4]],\n [floats[1], floats[3], floats[5]],\n [0, 0, 1],\n ];\n };\n Referentiel.prototype.matrixTransformOrigin = function () {\n var transformOriginAttr = this.css(\"transform-origin\")\n .replace(/px/g, \"\")\n .split(\" \")\n .map(function (v) {\n return parseFloat(v) || 0;\n });\n if (transformOriginAttr.length !== 2)\n throw new Error(\"Transform origin parsing error\"); //! TODO We should do better here.\n var transformOrigin = transformOriginAttr;\n return [\n [1, 0, transformOrigin[0]],\n [0, 1, transformOrigin[1]],\n [0, 0, 1],\n ];\n };\n Referentiel.prototype.matrixBorder = function () {\n var left = parseFloat(this.css(\"border-left-width\").replace(/px/g, \"\")) || 0;\n var top = parseFloat(this.css(\"border-top-width\").replace(/px/g, \"\")) || 0;\n return [\n [1, 0, left],\n [0, 1, top],\n [0, 0, 1],\n ];\n };\n Referentiel.prototype.matrixScroll = function () {\n if (!(this.reference instanceof HTMLElement))\n return Referentiel.identity();\n var left = this.reference.scrollLeft;\n var top = this.reference.scrollTop;\n return [\n [1, 0, -left],\n [0, 1, -top],\n [0, 0, 1],\n ];\n };\n Referentiel.prototype.parent = function (element) {\n if (element.parentNode != null &&\n element.parentNode !== document.documentElement) {\n return element.parentNode;\n }\n else {\n return null;\n }\n };\n Referentiel.prototype.matrixOffset = function () {\n var _a;\n var _b = this.offset(this.reference), left = _b[0], top = _b[1];\n switch (this.css(\"position\")) {\n case \"absolute\":\n return [\n [1, 0, left],\n [0, 1, top],\n [0, 0, 1],\n ];\n case \"fixed\":\n left += window.pageXOffset;\n top += window.pageYOffset;\n return [\n [1, 0, left],\n [0, 1, top],\n [0, 0, 1],\n ];\n }\n if (this.offsetParent != null) {\n if (this.offsetParent !== this.reference) {\n _a = [0, 0], left = _a[0], top = _a[1];\n }\n }\n return [\n [1, 0, left],\n [0, 1, top],\n [0, 0, 1],\n ];\n };\n Referentiel.prototype.matrixSVGViewbox = function () {\n if (!(this.reference instanceof window.SVGElement)) {\n return Referentiel.identity();\n }\n var size = [\n parseFloat(this.css(\"width\").replace(/px/g, \"\")),\n parseFloat(this.css(\"height\").replace(/px/g, \"\")),\n ];\n var attr = this.reference.getAttribute(\"viewBox\");\n if (attr == null) {\n return Referentiel.identity();\n }\n var viewBoxAttr = attr\n .replace(\",\", \" \")\n .replace(\" \", \" \")\n .split(\" \")\n .map(function (e) {\n return parseFloat(e);\n });\n if (viewBoxAttr.length !== 4)\n throw new Error(\"Viewbox parsing error\");\n var viewBox = viewBoxAttr; //! TODO find a better way ?\n var scale = [\n size[0] / viewBox[2],\n size[1] / viewBox[3],\n ];\n return Referentiel.mult([\n [scale[0], 0, 0],\n [0, scale[1], 0],\n [0, 0, 1],\n ], [\n [1, 0, -viewBox[0]],\n [0, 1, -viewBox[1]],\n [0, 0, 1],\n ]);\n };\n Referentiel.prototype.offset = function (element) {\n if (!(element instanceof HTMLElement || element instanceof SVGElement))\n return [0, 0];\n if (element instanceof SVGElement && element.tagName !== \"svg\")\n return [0, 0];\n if (!(this.reference instanceof Element))\n return [0, 0];\n if (element instanceof HTMLElement)\n return [element.offsetLeft, element.offsetTop];\n var pos = this.reference.getBoundingClientRect();\n var offset = [pos.left, pos.top];\n var parent = this.parent(element);\n if (parent instanceof HTMLElement || parent instanceof SVGElement) {\n var ppos = parent.getBoundingClientRect();\n offset[0] -= ppos.left;\n offset[1] -= ppos.top;\n }\n return offset;\n };\n Referentiel.prototype.css = function (property) {\n if (Referentiel.jquery) {\n return Referentiel.jquery(this.reference).css(property);\n }\n if (this.reference instanceof Element ||\n this.reference instanceof SVGElement) {\n return window.getComputedStyle(this.reference).getPropertyValue(property);\n }\n return \"\";\n };\n Referentiel.mult = function () {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n var a = args[0], b = args[1], rest = args.slice(2);\n if (!a)\n throw new Error(\"Matrix is null\");\n if (!b)\n return a;\n return Referentiel.mult.apply(Referentiel, __spreadArray([Referentiel.multiply(a, b)], rest, false));\n };\n Referentiel.identity = function () {\n return [\n [1, 0, 0],\n [0, 1, 0],\n [0, 0, 1],\n ];\n };\n Referentiel.det = function (m) {\n return (m[0][0] * (m[1][1] * m[2][2] - m[2][1] * m[1][2]) -\n m[0][1] * (m[1][0] * m[2][2] - m[1][2] * m[2][0]) +\n m[0][2] * (m[1][0] * m[2][1] - m[1][1] * m[2][0]));\n };\n Referentiel.inv = function (m) {\n var invdet = 1.0 / Referentiel.det(m);\n return [\n [\n (m[1][1] * m[2][2] - m[2][1] * m[1][2]) * invdet,\n (m[0][2] * m[2][1] - m[0][1] * m[2][2]) * invdet,\n (m[0][1] * m[1][2] - m[0][2] * m[1][1]) * invdet,\n ],\n [\n (m[1][2] * m[2][0] - m[1][0] * m[2][2]) * invdet,\n (m[0][0] * m[2][2] - m[0][2] * m[2][0]) * invdet,\n (m[1][0] * m[0][2] - m[0][0] * m[1][2]) * invdet,\n ],\n [\n (m[1][0] * m[2][1] - m[2][0] * m[1][1]) * invdet,\n (m[2][0] * m[0][1] - m[0][0] * m[2][1]) * invdet,\n (m[0][0] * m[1][1] - m[1][0] * m[0][1]) * invdet,\n ],\n ];\n };\n Referentiel.multiply = function (a, b) {\n var index = [0, 1, 2];\n var res = [\n [0.0, 0.0, 0.0],\n [0.0, 0.0, 0.0],\n [0.0, 0.0, 0.0],\n ];\n index.forEach(function (i) {\n index.forEach(function (j) {\n index.forEach(function (k) { return (res[i][j] += a[i][k] * b[k][j]); });\n });\n });\n return res;\n };\n __decorate([\n cache,\n __metadata(\"design:type\", Function),\n __metadata(\"design:paramtypes\", []),\n __metadata(\"design:returntype\", Array)\n ], Referentiel.prototype, \"matrixInv\");\n __decorate([\n cache,\n __metadata(\"design:type\", Function),\n __metadata(\"design:paramtypes\", []),\n __metadata(\"design:returntype\", Array)\n ], Referentiel.prototype, \"matrix\");\n return Referentiel;\n}());\n\n//# sourceMappingURL=referentiel.js.map\n\n//# sourceURL=webpack://Referentiel/./dist/referentiel.js?"); /***/ }) /******/ }); /************************************************************************/ /******/ // The require scope /******/ var __webpack_require__ = {}; /******/ /************************************************************************/ /******/ /* webpack/runtime/define property getters */ /******/ (() => { /******/ // define getter functions for harmony exports /******/ __webpack_require__.d = (exports, definition) => { /******/ for(var key in definition) { /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); /******/ } /******/ } /******/ }; /******/ })(); /******/ /******/ /* webpack/runtime/hasOwnProperty shorthand */ /******/ (() => { /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop)) /******/ })(); /******/ /******/ /* webpack/runtime/make namespace object */ /******/ (() => { /******/ // define __esModule on exports /******/ __webpack_require__.r = (exports) => { /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); /******/ } /******/ Object.defineProperty(exports, '__esModule', { value: true }); /******/ }; /******/ })(); /******/ /************************************************************************/ /******/ /******/ // startup /******/ // Load entry module and return exports /******/ // This entry module can't be inlined because the eval devtool is used. /******/ var __webpack_exports__ = {}; /******/ __webpack_modules__["./dist/referentiel.js"](0, __webpack_exports__, __webpack_require__); /******/ Referentiel = __webpack_exports__; /******/ /******/ })() ;