{"id":22160379,"url":"https://github.com/rozek/svelte-coordinate-conversion","last_synced_at":"2025-07-26T09:31:29.492Z","repository":{"id":57375174,"uuid":"375919767","full_name":"rozek/svelte-coordinate-conversion","owner":"rozek","description":"converts coordinates between viewport, document and element coordinate systems (not only for Svelte)","archived":false,"fork":false,"pushed_at":"2024-09-13T19:25:49.000Z","size":39,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-12T16:02:37.624Z","etag":null,"topics":["coordinate-conversions","document-coordinates","local-coordinates","viewport-coordinates"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rozek.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-06-11T05:56:13.000Z","updated_at":"2024-09-13T19:25:52.000Z","dependencies_parsed_at":"2024-05-20T06:29:16.400Z","dependency_job_id":"3329561a-2c0b-43af-8101-e7c46aed7157","html_url":"https://github.com/rozek/svelte-coordinate-conversion","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/rozek/svelte-coordinate-conversion","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fsvelte-coordinate-conversion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fsvelte-coordinate-conversion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fsvelte-coordinate-conversion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fsvelte-coordinate-conversion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rozek","download_url":"https://codeload.github.com/rozek/svelte-coordinate-conversion/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fsvelte-coordinate-conversion/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267145508,"owners_count":24042650,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-26T02:00:08.937Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["coordinate-conversions","document-coordinates","local-coordinates","viewport-coordinates"],"created_at":"2024-12-02T04:07:37.729Z","updated_at":"2025-07-26T09:31:29.206Z","avatar_url":"https://github.com/rozek.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-coordinate-conversion #\n\nconverts coordinates between viewport, document and element coordinate systems (not only in Svelte)\n \n**NPM users**: please consider the [Github README](https://github.com/rozek/svelte-viewport-info/blob/main/README.md) for the latest description of this package (as updating the docs would otherwise always require a new NPM package version)\n\n\u003e Just a small note: if you like this module and plan to use it, consider \"starring\" this repository (you will find the \"Star\" button on the top right of this page), so that I know which of my repositories to take most care of.\n\n## Installation ##\n\n`svelte-coordinate-conversion` may be used as an ECMAScript module (ESM), a CommonJS or AMD module or from a global variable.\n\nYou may either install the package into your build environment using [NPM](https://docs.npmjs.com/) with the command\n\n```\nnpm install svelte-coordinate-conversion\n```\n\nor load the plain script file directly\n\n```html\n\u003cscript src=\"https://unpkg.com/svelte-coordinate-conversion\"\u003e\u003c/script\u003e\n```\n\n## Access ##\n\nHow to access the package depends on the type of module you prefer\n\n* ESM (or Svelte): `import Conversion from 'svelte-coordinate-conversion'`\n* CommonJS: `const Conversion = require('svelte-coordinate-conversion')`\n* AMD: `require(['svelte-coordinate-conversion'], (Conversion) =\u003e {...})`\n\nAlternatively, you may access the global variable `Conversion` directly.\n\nNote for ECMAScript module users: all module functions and values are exported individually, thus allowing your bundler to perform some \"tree-shaking\" in order to include actually used functions or values (together with their dependencies) only.\n\n## Usage within Svelte ##\n\nFor Svelte it is recommended to import the package within a module context:\n\n```html\n\u003cscript context=\"module\"\u003e\n  import { fromLocalTo,fromViewportTo,fromDocumentTo } from 'svelte-coordinate-conversion'\n  import { onMount } from 'svelte'\n\u003c/script\u003e\n\n\u003cscript\u003e\n  let TargetElement // element, whose local position is to be read or set\n  let localPosition, ViewportPosition, DocumentPosition\n  \n  onMount(() =\u003e {\n    localPosition    = { left:0, top:0 } // local position to be converted\n    ViewportPosition = fromLocalTo('viewport',localPosition,TargetElement)\n    DocumentPosition = fromLocalTo('document',localPosition,TargetElement)\n\n    ViewportPosition = { left:0, top:0 } // viewport position to be converted\n    localPosition    = fromViewportTo('local',   ViewportPosition,TargetElement)\n    DocumentPosition = fromViewportTo('document',ViewportPosition)\n\n    DocumentPosition = { left:0, top:0 } // document position to be converted\n    localPosition    = fromDocumentTo('local',   DocumentPosition,TargetElement)\n    ViewportPosition = fromDocumentTo('viewport',DocumentPosition)\n  })\n\u003c/script\u003e\n\n\u003cdiv bind:this={TargetElement}\u003e\u003c/div\u003e\n```\n\n## Usage as ECMAscript Module ##\n\nUsing `svelte-coordinate-conversion` as an ECMAscript module looks very similar to the Svelte use case:\n\n```javascript\nimport { fromLocalTo,fromViewportTo,fromDocumentTo } from 'svelte-coordinate-conversion'\n\nlet TargetElement // element, whose local position is to be read or set\nlet localPosition, ViewportPosition, DocumentPosition\n  \nlocalPosition    = { left:0, top:0 } // local position to be converted\nViewportPosition = fromLocalTo('viewport',localPosition,TargetElement)\nDocumentPosition = fromLocalTo('document',localPosition,TargetElement)\n\nViewportPosition = { left:0, top:0 } // viewport position to be converted\nlocalPosition    = fromViewportTo('local',   ViewportPosition,TargetElement)\nDocumentPosition = fromViewportTo('document',ViewportPosition)\n\nDocumentPosition = { left:0, top:0 } // document position to be converted\nlocalPosition    = fromDocumentTo('local',   DocumentPosition,TargetElement)\nViewportPosition = fromDocumentTo('viewport',DocumentPosition)\n```\n\n## Usage as CommonJS or AMD Module (or as a global Variable) ##\n\nLet's assume that you already \"required\" or \"imported\" (or simply loaded) the module according to your local environment. In that case, you may use it as follows:\n\n```javascript\nlet TargetElement // element, whose local position is to be read or set\nlet localPosition, ViewportPosition, DocumentPosition\n  \nlocalPosition    = { left:0, top:0 } // local position to be converted\nViewportPosition = Conversion.fromLocalTo('viewport',localPosition,TargetElement)\nDocumentPosition = Conversion.fromLocalTo('document',localPosition,TargetElement)\n\nViewportPosition = { left:0, top:0 } // viewport position to be converted\nlocalPosition    = Conversion.fromViewportTo('local',   ViewportPosition,TargetElement)\nDocumentPosition = Conversion.fromViewportTo('document',ViewportPosition)\n\nDocumentPosition = { left:0, top:0 } // document position to be converted\nlocalPosition    = Conversion.fromDocumentTo('local',   DocumentPosition,TargetElement)\nViewportPosition = Conversion.fromDocumentTo('viewport',DocumentPosition)\n```\n\n## Example ##\n\nAn example is available on the Svelte REPL - feel free to play with it!\n\n* [svelte-coordinate-conversion](https://svelte.dev/repl/269fa097ebfb4175990b129b25e9dafa)\n\n## Background Information ##\n\nFrom time to time it becomes necessary to covert browser coordinates between various coordinate systems, e.g., from relative to an element to relative to the current viewport or the whole document. This package simplifies such conversions.\n\n### JavaScript API ###\n\nThe package offers a JavaScript `default` export, which may be imported as follows\n\n  `import Conversion from 'svelte-coordinate-conversion'`\n\nWith such an import, the JavaScript API can be used as follows:\n\n* **`Conversion.fromLocalTo('viewport',localPosition,TargetElement)`**\u003cbr\u003econverts `localPosition` (which is relative to the `TargetElement`) into a position relative to the current viewport\n* **`Conversion.fromLocalTo('document',localPosition,TargetElement)`**\u003cbr\u003econverts `localPosition` (which is relative to the `TargetElement`) into a position relative to the document\n* **`Conversion.fromViewportTo('local',ViewportPosition,TargetElement)`**\u003cbr\u003econverts `ViewportPosition` (which is relative to the current viewport) into a position relative to element `TargetElement`\n* **`Conversion.fromViewportTo('document',ViewportPosition)`**\u003cbr\u003econverts `ViewportPosition` (which is relative to the current viewport) into a position relative to the document\n* **`Conversion.fromDocumentTo('local',DocumentPosition,TargetElement)`**\u003cbr\u003econverts `DocumentPosition` (which is relative to the document) into a position relative to element `TargetElement`\n* **`Conversion.fromDocumentTo('viewport',DocumentPosition)`**\u003cbr\u003econverts `DocumentPosition` (which is relative to the document) into a position relative to the current viewport\n\n## Build Instructions ##\n\nYou may easily build this package yourself.\n\nJust install [NPM](https://docs.npmjs.com/) according to the instructions for your platform and follow these steps:\n\n1. either clone this repository using [git](https://git-scm.com/) or [download a ZIP archive](https://github.com/rozek/svelte-coordinate-conversion/archive/refs/heads/main.zip) with its contents to your disk and unpack it there \n2. open a shell and navigate to the root directory of this repository\n3. run `npm install` in order to install the complete build environment\n4. execute `npm run build` to create a new build\n\nYou may also look into the author's [build-configuration-study](https://github.com/rozek/build-configuration-study) for a general description of his build environment.\n\n## License ##\n\n[MIT License](LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frozek%2Fsvelte-coordinate-conversion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frozek%2Fsvelte-coordinate-conversion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frozek%2Fsvelte-coordinate-conversion/lists"}