Update.

.editorconfig

@@ -12,7 +12,7 @@ insert_final_newline = true
 trim_trailing_whitespace = true
 
 
-[{package.json,.eslintrc,.travis.yml}]
+[{*.json,*.yml}]
 indent_size = 2
 
 

.eslintignore

@@ -1,6 +0,0 @@
-build
-coverage
-dist
-es5
-local
-node_modules

.eslintrc

@@ -1,182 +0,0 @@
----
-  root: true
-
-  env:
-    es6: true
-    node: true
-
-  ecmaFeatures:
-    ecmaVersion: 6
-
-  rules:
-    array-bracket-spacing: [2, never]
-    arrow-parens: [2, as-needed]
-    arrow-spacing: 2
-    block-scoped-var: 2
-    brace-style: [2, 1tbs, {allowSingleLine: true}]
-    camelcase: 0
-    comma-dangle: [2, never]
-    comma-spacing: [2, {before: false, after: true}]
-    comma-style: [2, last]
-    complexity: [1, 16] ###
-    computed-property-spacing: [2, never]
-    consistent-return: 2
-    consistent-this: [2, self]
-    constructor-super: 2
-    curly: [2, multi-line]
-    default-case: 2
-    dot-location: [2, property]
-    dot-notation: [2, {allowKeywords: true}]
-    eol-last: 2
-    eqeqeq: 2
-    func-names: 2
-    func-style: [2, declaration, {allowArrowFunctions: true}]
-    generator-star-spacing: [2, after]
-    guard-for-in: 2
-    handle-callback-err: 2
-    indent: [2, 4]
-    key-spacing: [2, {beforeColon: false, afterColon: true}]
-    keyword-spacing: [2, {before: true, after: true}]
-    linebreak-style: [2, unix]
-    max-depth: [1, 4]
-    max-len: [0, 80, 4]
-    max-nested-callbacks: [1, 3]
-    max-params: [1, 5] ###
-    max-statements: [1, 32] ###
-    new-cap: 0
-    new-parens: 2
-    newline-after-var: 0
-    no-alert: 2
-    no-array-constructor: 2
-    no-bitwise: 2
-    no-caller: 2
-    no-catch-shadow: 2
-    no-class-assign: 2
-    no-cond-assign: 2
-    no-console: 0 ###
-    no-const-assign: 2
-    no-constant-condition: 1
-    no-continue: 0
-    no-control-regex: 2
-    no-debugger: 2
-    no-delete-var: 2
-    no-div-regex: 2
-    no-dupe-args: 2
-    no-dupe-class-members: 2
-    no-dupe-keys: 2
-    no-duplicate-case: 2
-    no-else-return: 1
-    no-empty: 2
-    no-empty-character-class: 2
-    no-empty-pattern: 2
-    no-eq-null: 2
-    no-eval: 2
-    no-ex-assign: 2
-    no-extend-native: 1
-    no-extra-bind: 2
-    no-extra-boolean-cast: 2
-    no-extra-parens: 1
-    no-extra-semi: 2
-    no-fallthrough: 2
-    no-floating-decimal: 2
-    no-func-assign: 2
-    no-implicit-coercion: [2, {boolean: false, number: true, string: true}]
-    no-implied-eval: 2
-    no-inline-comments: 0
-    no-inner-declarations: [2, functions]
-    no-invalid-regexp: 2
-    no-invalid-this: 2
-    no-irregular-whitespace: 2
-    no-iterator: 2
-    no-label-var: 2
-    no-labels: 2
-    no-lone-blocks: 2
-    no-lonely-if: 2
-    no-loop-func: 1
-    no-magic-numbers: 0
-    no-mixed-requires: [2, false]
-    no-mixed-spaces-and-tabs: [2, false]
-    no-multi-spaces: 2
-    no-multi-str: 2
-    no-multiple-empty-lines: [2, {max: 4}]
-    no-native-reassign: 1
-    no-negated-in-lhs: 2
-    no-nested-ternary: 0
-    no-new: 2
-    no-new-func: 2
-    no-new-object: 2
-    no-new-require: 2
-    no-new-wrappers: 2
-    no-obj-calls: 2
-    no-octal: 2
-    no-octal-escape: 2
-    no-param-reassign: 0
-    no-path-concat: 2
-    no-plusplus: 2
-    no-process-env: 2
-    no-process-exit: 2
-    no-proto: 2
-    no-redeclare: 2
-    no-regex-spaces: 2
-    no-restricted-modules: 2
-    no-return-assign: 2
-    no-script-url: 2
-    no-self-compare: 2
-    no-sequences: 2
-    no-shadow: 2
-    no-shadow-restricted-names: 2
-    no-spaced-func: 2
-    no-sparse-arrays: 2
-    no-sync: 0
-    no-ternary: 0
-    no-this-before-super: 2
-    no-throw-literal: 1
-    no-trailing-spaces: 2
-    no-undef: 2
-    no-undef-init: 2
-    no-undefined: 0
-    no-underscore-dangle: 0
-    no-unexpected-multiline: 2
-    no-unneeded-ternary: 2
-    no-unreachable: 2
-    no-useless-call: 2
-    no-useless-concat: 2
-    no-unused-expressions: 2
-    no-unused-vars: [1, {vars: all, args: after-used}]
-    no-use-before-define: 2
-    no-var: 2
-    no-void: 2
-    no-warning-comments: [1, {terms: [todo, fixme, xxx], location: start}]
-    no-with: 2
-    object-curly-spacing: [2, never]
-    object-shorthand: [2, always]
-    one-var: [2, never]
-    operator-assignment: [2, always]
-    operator-linebreak: [2, after]
-    padded-blocks: [2, never]
-    prefer-arrow-callback: 2
-    prefer-const: 1
-    prefer-reflect: 1
-    prefer-spread: 2
-    prefer-template: 0 ###
-    quote-props: [2, as-needed]
-    quotes: [2, single, avoid-escape]
-    radix: 2
-    require-yield: 2
-    semi: 2
-    semi-spacing: [2, {before: false, after: true}]
-    sort-vars: 0
-    space-before-blocks: [2, always]
-    space-before-function-paren: [2, {anonymous: always, named: never}]
-    space-in-parens: [2, never]
-    space-infix-ops: 2
-    space-unary-ops: [2, {words: true, nonwords: false}]
-    spaced-comment: [2, always]
-    strict: [2, never]
-    use-isnan: 2
-    valid-jsdoc: 2
-    valid-typeof: 2
-    vars-on-top: 0
-    wrap-iife: [2, outside]
-    wrap-regex: 2
-    yoda: [2, never, {exceptRange: true}]

.gitignore

@@ -1,5 +1,6 @@
-build
-coverage
-local
-node_modules
-npm-debug.log
+/.nyc_output/
+/build/
+/coverage/
+/local/
+/node_modules/
+/npm-debug.log

README.md

@@ -1,7 +1,6 @@
 # pagemap
 
-[![license][license-img]][github] [![web][web-img]][web] [![github][github-img]][github] [![npm][npm-img]][npm]  
-[![version][npm-v-img]][npm] [![downloads][npm-dm-img]][npm] [![dependencies status][gemnasium-img]][gemnasium]
+[![license][license-img]][github] [![github][github-img]][github] [![npm][npm-img]][npm]  
 
 Mini map for web pages.
 
@@ -10,7 +9,7 @@ Mini map for web pages.
 
 add a `canvas` tag to your HTML page:
 ```html
-<canvas id='#map'></canvas>
+<canvas id='map'></canvas>
 ```
 
 fix it's position on the screen:
@@ -30,13 +29,13 @@ init and style the mini map:
 pagemap(document.querySelector('#map'), {
     viewport: null,
     styles: {
-        'header,footer,section,article': rgba(0,0,0,0.08),
-        'h1,a': rgba(0,0,0,0.10),
-        'h2,h3,h4': rgba(0,0,0,0.08)
+        'header,footer,section,article': 'rgba(0,0,0,0.08)',
+        'h1,a': 'rgba(0,0,0,0.10)',
+        'h2,h3,h4': 'rgba(0,0,0,0.08)'
     },
-    back: rgba(0,0,0,0.02),
-    view: rgba(0,0,0,0.05),
-    drag: rgba(0,0,0,0.10),
+    back: 'rgba(0,0,0,0.02)',
+    view: 'rgba(0,0,0,0.05)',
+    drag: 'rgba(0,0,0,0.10)',
     interval: null
 });
 ```
@@ -45,7 +44,7 @@ pagemap(document.querySelector('#map'), {
 ## License
 The MIT License (MIT)
 
-Copyright (c) 2016 Lars Jung (https://larsjung.de)
+Copyright (c) 2024 Lars Jung (https://larsjung.de)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -66,16 +65,9 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 
 
-[web]: https://larsjung.de/pagemap/
 [github]: https://github.com/lrsjng/pagemap
 [npm]: https://www.npmjs.org/package/pagemap
-[gemnasium]: https://gemnasium.com/lrsjng/pagemap
 
 [license-img]: https://img.shields.io/badge/license-MIT-a0a060.svg?style=flat-square
-[web-img]: https://img.shields.io/badge/web-larsjung.de/pagemap-a0a060.svg?style=flat-square
 [github-img]: https://img.shields.io/badge/github-lrsjng/pagemap-a0a060.svg?style=flat-square
 [npm-img]: https://img.shields.io/badge/npm-pagemap-a0a060.svg?style=flat-square
-
-[npm-v-img]: https://img.shields.io/npm/v/pagemap.svg?style=flat-square
-[npm-dm-img]: https://img.shields.io/npm/dm/pagemap.svg?style=flat-square
-[gemnasium-img]: https://img.shields.io/gemnasium/lrsjng/pagemap.svg?style=flat-square

dist/pagemap.js

@@ -0,0 +1,250 @@
+/*! pagemap v1.4.1 - undefined */
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory();
+	else if(typeof define === 'function' && define.amd)
+		define("pagemap", [], factory);
+	else if(typeof exports === 'object')
+		exports["pagemap"] = factory();
+	else
+		root["pagemap"] = factory();
+})((typeof self !== 'undefined' ? self : this), () => {
+return /******/ (() => { // webpackBootstrap
+/******/ 	var __webpack_modules__ = ([
+/* 0 */
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+module.exports = function (canvas, options) {
+  var WIN = __webpack_require__.g.window;
+  var DOC = WIN.document;
+  var DOC_EL = DOC.documentElement;
+  var BODY = DOC.querySelector('body');
+  var CTX = canvas.getContext('2d');
+  var black = function black(pc) {
+    return "rgba(0,0,0,".concat(pc / 100, ")");
+  };
+  var settings = Object.assign({
+    viewport: null,
+    styles: {
+      'header,footer,section,article': black(8),
+      'h1,a': black(10),
+      'h2,h3,h4': black(8)
+    },
+    back: black(2),
+    view: black(5),
+    drag: black(10),
+    interval: null
+  }, options);
+  var _listener = function _listener(el, method, types, fn) {
+    return types.split(/\s+/).forEach(function (type) {
+      return el[method](type, fn);
+    });
+  };
+  var on = function on(el, types, fn) {
+    return _listener(el, 'addEventListener', types, fn);
+  };
+  var off = function off(el, types, fn) {
+    return _listener(el, 'removeEventListener', types, fn);
+  };
+  var Rect = function Rect(x, y, w, h) {
+    return {
+      x: x,
+      y: y,
+      w: w,
+      h: h
+    };
+  };
+  var rect_rel_to = function rect_rel_to(rect) {
+    var pos = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+      x: 0,
+      y: 0
+    };
+    return Rect(rect.x - pos.x, rect.y - pos.y, rect.w, rect.h);
+  };
+  var rect_of_doc = function rect_of_doc() {
+    return Rect(0, 0, DOC_EL.scrollWidth, DOC_EL.scrollHeight);
+  };
+  var rect_of_win = function rect_of_win() {
+    return Rect(WIN.pageXOffset, WIN.pageYOffset, DOC_EL.clientWidth, DOC_EL.clientHeight);
+  };
+  var el_get_offset = function el_get_offset(el) {
+    var br = el.getBoundingClientRect();
+    return {
+      x: br.left + WIN.pageXOffset,
+      y: br.top + WIN.pageYOffset
+    };
+  };
+  var rect_of_el = function rect_of_el(el) {
+    var _el_get_offset = el_get_offset(el),
+      x = _el_get_offset.x,
+      y = _el_get_offset.y;
+    return Rect(x, y, el.offsetWidth, el.offsetHeight);
+  };
+  var rect_of_viewport = function rect_of_viewport(el) {
+    var _el_get_offset2 = el_get_offset(el),
+      x = _el_get_offset2.x,
+      y = _el_get_offset2.y;
+    return Rect(x + el.clientLeft, y + el.clientTop, el.clientWidth, el.clientHeight);
+  };
+  var rect_of_content = function rect_of_content(el) {
+    var _el_get_offset3 = el_get_offset(el),
+      x = _el_get_offset3.x,
+      y = _el_get_offset3.y;
+    return Rect(x + el.clientLeft - el.scrollLeft, y + el.clientTop - el.scrollTop, el.scrollWidth, el.scrollHeight);
+  };
+  var calc_scale = function () {
+    var width = canvas.clientWidth;
+    var height = canvas.clientHeight;
+    return function (w, h) {
+      return Math.min(width / w, height / h);
+    };
+  }();
+  var resize_canvas = function resize_canvas(w, h) {
+    canvas.width = w;
+    canvas.height = h;
+    canvas.style.width = "".concat(w, "px");
+    canvas.style.height = "".concat(h, "px");
+  };
+  var viewport = settings.viewport;
+  var find = function find(sel) {
+    return Array.from((viewport || DOC).querySelectorAll(sel));
+  };
+  var drag = false;
+  var root_rect;
+  var view_rect;
+  var scale;
+  var drag_rx;
+  var drag_ry;
+  var draw_rect = function draw_rect(rect, col) {
+    if (col) {
+      CTX.beginPath();
+      CTX.rect(rect.x, rect.y, rect.w, rect.h);
+      CTX.fillStyle = col;
+      CTX.fill();
+    }
+  };
+  var apply_styles = function apply_styles(styles) {
+    Object.keys(styles).forEach(function (sel) {
+      var col = styles[sel];
+      find(sel).forEach(function (el) {
+        draw_rect(rect_rel_to(rect_of_el(el), root_rect), col);
+      });
+    });
+  };
+  var draw = function draw() {
+    root_rect = viewport ? rect_of_content(viewport) : rect_of_doc();
+    view_rect = viewport ? rect_of_viewport(viewport) : rect_of_win();
+    scale = calc_scale(root_rect.w, root_rect.h);
+    resize_canvas(root_rect.w * scale, root_rect.h * scale);
+    CTX.setTransform(1, 0, 0, 1, 0, 0);
+    CTX.clearRect(0, 0, canvas.width, canvas.height);
+    CTX.scale(scale, scale);
+    draw_rect(rect_rel_to(root_rect, root_rect), settings.back);
+    apply_styles(settings.styles);
+    draw_rect(rect_rel_to(view_rect, root_rect), drag ? settings.drag : settings.view);
+  };
+  var on_drag = function on_drag(ev) {
+    ev.preventDefault();
+    var cr = rect_of_viewport(canvas);
+    var x = (ev.pageX - cr.x) / scale - view_rect.w * drag_rx;
+    var y = (ev.pageY - cr.y) / scale - view_rect.h * drag_ry;
+    if (viewport) {
+      viewport.scrollLeft = x;
+      viewport.scrollTop = y;
+    } else {
+      WIN.scrollTo(x, y);
+    }
+    draw();
+  };
+  var _on_drag_end = function on_drag_end(ev) {
+    drag = false;
+    canvas.style.cursor = 'pointer';
+    BODY.style.cursor = 'auto';
+    off(WIN, 'mousemove', on_drag);
+    off(WIN, 'mouseup', _on_drag_end);
+    on_drag(ev);
+  };
+  var on_drag_start = function on_drag_start(ev) {
+    drag = true;
+    var cr = rect_of_viewport(canvas);
+    var vr = rect_rel_to(view_rect, root_rect);
+    drag_rx = ((ev.pageX - cr.x) / scale - vr.x) / vr.w;
+    drag_ry = ((ev.pageY - cr.y) / scale - vr.y) / vr.h;
+    if (drag_rx < 0 || drag_rx > 1 || drag_ry < 0 || drag_ry > 1) {
+      drag_rx = 0.5;
+      drag_ry = 0.5;
+    }
+    canvas.style.cursor = 'crosshair';
+    BODY.style.cursor = 'crosshair';
+    on(WIN, 'mousemove', on_drag);
+    on(WIN, 'mouseup', _on_drag_end);
+    on_drag(ev);
+  };
+  var init = function init() {
+    canvas.style.cursor = 'pointer';
+    on(canvas, 'mousedown', on_drag_start);
+    on(viewport || WIN, 'load resize scroll', draw);
+    if (settings.interval > 0) {
+      setInterval(function () {
+        return draw();
+      }, settings.interval);
+    }
+    draw();
+  };
+  init();
+  return {
+    redraw: draw
+  };
+};
+
+/***/ })
+/******/ 	]);
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/global */
+/******/ 	(() => {
+/******/ 		__webpack_require__.g = (function() {
+/******/ 			if (typeof globalThis === 'object') return globalThis;
+/******/ 			try {
+/******/ 				return this || new Function('return this')();
+/******/ 			} catch (e) {
+/******/ 				if (typeof window === 'object') return window;
+/******/ 			}
+/******/ 		})();
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+/******/ 	
+/******/ 	// startup
+/******/ 	// Load entry module and return exports
+/******/ 	// This entry module is referenced by other modules so it can't be inlined
+/******/ 	var __webpack_exports__ = __webpack_require__(0);
+/******/ 	
+/******/ 	return __webpack_exports__;
+/******/ })()
+;
+});

dist/pagemap.min.js

@@ -1,2 +1,2 @@
-/*! pagemap v0.3.0 - https://larsjung.de/pagemap/ */
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.pagemap=e():t.pagemap=e()}(this,function(){return function(t){function e(n){if(o[n])return o[n].exports;var r=o[n]={exports:{},id:n,loaded:!1};return t[n].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var o={};return e.m=t,e.c=o,e.p="",e(0)}([function(t,e,o){(function(e){"use strict";var n=o(1),r=e.window,i=r.document,c=i.querySelector("body"),u=function(t){return"rgba(0,0,0,"+t/100+")"},f={viewport:null,styles:{"header,footer,section,article":u(8),"h1,a":u(10),"h2,h3,h4":u(8)},back:u(2),view:u(5),drag:u(10),interval:null},l=function(t,e,o,n){return o.split(/\s+/).forEach(function(o){return t[e](o,n)})},s=function(t,e,o){return l(t,"addEventListener",e,o)},a=function(t,e,o){return l(t,"removeEventListener",e,o)};t.exports=function(t,e){var o=Object.assign({},f,e),u=t.getContext("2d"),l=function(){var e=t.clientWidth,o=t.clientHeight;return function(t,n){return Math.min(e/t,o/n)}}(),p=function(e,o){t.width=e,t.height=o,t.style.width=e+"px",t.style.height=o+"px"},h=o.viewport,d=function(t){return Array.from((h||i).querySelectorAll(t))},v=!1,y=void 0,g=void 0,w=void 0,x=void 0,m=void 0,b=function(t,e){e&&(u.beginPath(),u.rect(t.x,t.y,t.w,t.h),u.fillStyle=e,u.fill())},T=function(t){Object.keys(t).forEach(function(e){var o=t[e];d(e).forEach(function(t){b(n.ofElement(t).relativeTo(y),o)})})},E=function(){y=h?n.ofContent(h):n.ofDocument(),g=h?n.ofViewport(h):n.ofWindow(),w=l(y.w,y.h),p(y.w*w,y.h*w),u.setTransform(1,0,0,1,0,0),u.clearRect(0,0,t.width,t.height),u.scale(w,w),b(y.relativeTo(y),o.back),T(o.styles),b(g.relativeTo(y),v?o.drag:o.view)},O=function(e){e.preventDefault();var o=n.ofViewport(t),i=(e.pageX-o.x)/w-g.w*x,c=(e.pageY-o.y)/w-g.h*m;h?(h.scrollLeft=i,h.scrollTop=c):r.scrollTo(i,c),E()},W=function L(e){v=!1,t.style.cursor="pointer",c.style.cursor="auto",a(r,"mousemove",O),a(r,"mouseup",L),O(e)},j=function(e){v=!0;var o=n.ofViewport(t),i=g.relativeTo(y);x=((e.pageX-o.x)/w-i.x)/i.w,m=((e.pageY-o.y)/w-i.y)/i.h,(0>x||x>1||0>m||m>1)&&(x=.5,m=.5),t.style.cursor="crosshair",c.style.cursor="crosshair",s(r,"mousemove",O),s(r,"mouseup",W),O(e)},H=function(){t.style.cursor="pointer",s(t,"mousedown",j),s(h||r,"load resize scroll",E),o.interval>0&&setInterval(function(){return E()},o.interval),E()};return H(),{redraw:E}}}).call(e,function(){return this}())},function(t,e){(function(e){"use strict";var o=e.window,n=o.document.documentElement,r=t.exports=function(t,e,o,n){return Object.assign(Object.create(r.prototype),{x:t,y:e,w:o,h:n})};r.prototype={constructor:r,relativeTo:function(){var t=arguments.length<=0||void 0===arguments[0]?{x:0,y:0}:arguments[0];return r(this.x-t.x,this.y-t.y,this.w,this.h)}},r.ofDocument=function(){return r(0,0,n.scrollWidth,n.scrollHeight)},r.ofWindow=function(){return r(o.pageXOffset,o.pageYOffset,n.clientWidth,n.clientHeight)};var i=function(t){var e=t.getBoundingClientRect();return{x:e.left+o.pageXOffset,y:e.top+o.pageYOffset}};r.ofElement=function(t){var e=i(t),o=e.x,n=e.y;return r(o,n,t.offsetWidth,t.offsetHeight)},r.ofViewport=function(t){var e=i(t),o=e.x,n=e.y;return r(o+t.clientLeft,n+t.clientTop,t.clientWidth,t.clientHeight)},r.ofContent=function(t){var e=i(t),o=e.x,n=e.y;return r(o+t.clientLeft-t.scrollLeft,n+t.clientTop-t.scrollTop,t.scrollWidth,t.scrollHeight)}}).call(e,function(){return this}())}])});
+/*! pagemap v1.4.1 - undefined */
+((t,e)=>{"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("pagemap",[],e):"object"==typeof exports?exports.pagemap=e():t.pagemap=e()})("undefined"!=typeof self?self:this,()=>{return r=[(t,e,B)=>{t.exports=function(r,t){function e(t){return"rgba(0,0,0,".concat(t/100,")")}function n(t){k=!0;var e=L(r),n=b(u,c);f=((t.pageX-e.x)/l-n.x)/n.w,s=((t.pageY-e.y)/l-n.y)/n.h,(f<0||1<f||s<0||1<s)&&(s=f=.5),r.style.cursor="crosshair",d.style.cursor="crosshair",w(a,"mousemove",A),w(a,"mouseup",C),A(t)}var o,i,c,u,l,f,s,a=B.g.window,h=a.document,p=h.documentElement,d=h.querySelector("body"),y=r.getContext("2d"),g=Object.assign({viewport:null,styles:{"header,footer,section,article":e(8),"h1,a":e(10),"h2,h3,h4":e(8)},back:e(2),view:e(5),drag:e(10),interval:null},t),v=function(e,n,t,r){return t.split(/\s+/).forEach(function(t){return e[n](t,r)})},w=function(t,e,n){return v(t,"addEventListener",e,n)},x=function(t,e,n){return v(t,"removeEventListener",e,n)},m=function(t,e,n,r){return{x:t,y:e,w:n,h:r}},b=function(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{x:0,y:0};return m(t.x-e.x,t.y-e.y,t.w,t.h)},T=function(){return m(0,0,p.scrollWidth,p.scrollHeight)},j=function(){return m(a.pageXOffset,a.pageYOffset,p.clientWidth,p.clientHeight)},E=function(t){t=t.getBoundingClientRect();return{x:t.left+a.pageXOffset,y:t.top+a.pageYOffset}},H=function(t){var e=E(t),n=e.x;return m(n,e.y,t.offsetWidth,t.offsetHeight)},L=function(t){var e=E(t),n=e.x;return m(n+t.clientLeft,e.y+t.clientTop,t.clientWidth,t.clientHeight)},O=function(t){var e=E(t),n=e.x;return m(n+t.clientLeft-t.scrollLeft,e.y+t.clientTop-t.scrollTop,t.scrollWidth,t.scrollHeight)},W=(o=r.clientWidth,i=r.clientHeight,function(t,e){return Math.min(o/t,i/e)}),X=function(t,e){r.width=t,r.height=e,r.style.width="".concat(t,"px"),r.style.height="".concat(e,"px")},Y=g.viewport,R=function(t){return Array.from((Y||h).querySelectorAll(t))},k=!1,S=function(t,e){e&&(y.beginPath(),y.rect(t.x,t.y,t.w,t.h),y.fillStyle=e,y.fill())},z=function(n){Object.keys(n).forEach(function(t){var e=n[t];R(t).forEach(function(t){S(b(H(t),c),e)})})},q=function(){c=Y?O(Y):T(),u=Y?L(Y):j(),l=W(c.w,c.h),X(c.w*l,c.h*l),y.setTransform(1,0,0,1,0,0),y.clearRect(0,0,r.width,r.height),y.scale(l,l),S(b(c,c),g.back),z(g.styles),S(b(u,c),k?g.drag:g.view)},A=function(t){t.preventDefault();var e=L(r),n=(t.pageX-e.x)/l-u.w*f,t=(t.pageY-e.y)/l-u.h*s;Y?(Y.scrollLeft=n,Y.scrollTop=t):a.scrollTo(n,t),q()},C=function(t){k=!1,r.style.cursor="pointer",d.style.cursor="auto",x(a,"mousemove",A),x(a,"mouseup",C),A(t)};return r.style.cursor="pointer",w(r,"mousedown",n),w(Y||a,"load resize scroll",q),0<g.interval&&setInterval(function(){return q()},g.interval),q(),{redraw:q}}}],o={},n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(t){if("object"==typeof window)return window}}(),n(0);function n(t){var e=o[t];return void 0!==e||(e=o[t]={exports:{}},r[t](e,e.exports,n)),e.exports}var r,o});

eslint.config.cjs

@@ -0,0 +1,252 @@
+const globals = require("globals");
+
+module.exports = [{
+    ignores: ["eslint.config.*", "build/", "coverage/", "dist/", "es5/", "local/", "node_modules/"],
+}, {
+    languageOptions: {
+        globals: {
+            ...globals.node,
+        },
+
+        ecmaVersion: 2019,
+        sourceType: "commonjs",
+    },
+
+    rules: {
+        "array-bracket-spacing": [2, "never"],
+        "arrow-parens": [2, "as-needed"],
+        "arrow-spacing": 2,
+        "block-scoped-var": 2,
+
+        "brace-style": [2, "1tbs", {
+            allowSingleLine: true,
+        }],
+
+        camelcase: 0,
+        "comma-dangle": [2, "never"],
+
+        "comma-spacing": [2, {
+            before: false,
+            after: true,
+        }],
+
+        "comma-style": [2, "last"],
+        complexity: [1, 16],
+        "computed-property-spacing": [2, "never"],
+        "consistent-return": 2,
+        "consistent-this": [2, "self"],
+        "constructor-super": 2,
+        curly: [2, "multi-line"],
+        "default-case": 2,
+        "dot-location": [2, "property"],
+
+        "dot-notation": [2, {
+            allowKeywords: true,
+        }],
+
+        "eol-last": 2,
+        eqeqeq: 2,
+        "func-names": 2,
+
+        "func-style": [2, "declaration", {
+            allowArrowFunctions: true,
+        }],
+
+        "generator-star-spacing": [2, "after"],
+        "guard-for-in": 2,
+        "handle-callback-err": 2,
+        indent: [2, 4],
+
+        "key-spacing": [2, {
+            beforeColon: false,
+            afterColon: true,
+        }],
+
+        "keyword-spacing": [2, {
+            before: true,
+            after: true,
+        }],
+
+        "linebreak-style": [2, "unix"],
+        "max-depth": [1, 4],
+        "max-len": [0, 80, 4],
+        "max-nested-callbacks": [1, 3],
+        "max-params": [1, 5],
+        "max-statements": [1, 48],
+        "new-cap": 0,
+        "new-parens": 2,
+        "newline-after-var": 0,
+        "no-alert": 2,
+        "no-array-constructor": 2,
+        "no-bitwise": 2,
+        "no-caller": 2,
+        "no-catch-shadow": 2,
+        "no-class-assign": 2,
+        "no-cond-assign": 2,
+        "no-console": 0,
+        "no-const-assign": 2,
+        "no-constant-condition": 1,
+        "no-continue": 0,
+        "no-control-regex": 2,
+        "no-debugger": 2,
+        "no-delete-var": 2,
+        "no-div-regex": 2,
+        "no-dupe-args": 2,
+        "no-dupe-class-members": 2,
+        "no-dupe-keys": 2,
+        "no-duplicate-case": 2,
+        "no-else-return": 1,
+        "no-empty": 2,
+        "no-empty-character-class": 2,
+        "no-empty-pattern": 2,
+        "no-eq-null": 2,
+        "no-eval": 2,
+        "no-ex-assign": 2,
+        "no-extend-native": 1,
+        "no-extra-bind": 2,
+        "no-extra-boolean-cast": 2,
+        "no-extra-parens": 1,
+        "no-extra-semi": 2,
+        "no-fallthrough": 2,
+        "no-floating-decimal": 2,
+        "no-func-assign": 2,
+
+        "no-implicit-coercion": [2, {
+            boolean: false,
+            number: true,
+            string: true,
+        }],
+
+        "no-implied-eval": 2,
+        "no-inline-comments": 0,
+        "no-inner-declarations": [2, "functions"],
+        "no-invalid-regexp": 2,
+        "no-invalid-this": 2,
+        "no-irregular-whitespace": 2,
+        "no-iterator": 2,
+        "no-label-var": 2,
+        "no-labels": 2,
+        "no-lone-blocks": 2,
+        "no-lonely-if": 2,
+        "no-loop-func": 1,
+        "no-magic-numbers": 0,
+        "no-mixed-requires": [2, false],
+        "no-mixed-spaces-and-tabs": [2, false],
+        "no-multi-spaces": 2,
+        "no-multi-str": 2,
+
+        "no-multiple-empty-lines": [2, {
+            max: 4,
+        }],
+
+        "no-native-reassign": 1,
+        "no-negated-in-lhs": 2,
+        "no-nested-ternary": 0,
+        "no-new": 2,
+        "no-new-func": 2,
+        "no-new-object": 2,
+        "no-new-require": 2,
+        "no-new-wrappers": 2,
+        "no-obj-calls": 2,
+        "no-octal": 2,
+        "no-octal-escape": 2,
+        "no-param-reassign": 0,
+        "no-path-concat": 2,
+        "no-plusplus": 2,
+        "no-process-env": 2,
+        "no-process-exit": 2,
+        "no-proto": 2,
+        "no-redeclare": 2,
+        "no-regex-spaces": 2,
+        "no-restricted-modules": 2,
+        "no-return-assign": 2,
+        "no-script-url": 2,
+        "no-self-compare": 2,
+        "no-sequences": 2,
+        "no-shadow": 2,
+        "no-shadow-restricted-names": 2,
+        "no-spaced-func": 2,
+        "no-sparse-arrays": 2,
+        "no-sync": 0,
+        "no-ternary": 0,
+        "no-this-before-super": 2,
+        "no-throw-literal": 1,
+        "no-trailing-spaces": 2,
+        "no-undef": 2,
+        "no-undef-init": 2,
+        "no-undefined": 0,
+        "no-underscore-dangle": 0,
+        "no-unexpected-multiline": 2,
+        "no-unneeded-ternary": 2,
+        "no-unreachable": 2,
+        "no-useless-call": 2,
+        "no-useless-concat": 2,
+        "no-unused-expressions": 2,
+
+        "no-unused-vars": [1, {
+            vars: "all",
+            args: "after-used",
+        }],
+
+        "no-use-before-define": 2,
+        "no-var": 2,
+        "no-void": 2,
+
+        "no-warning-comments": [1, {
+            terms: ["todo", "fixme", "xxx"],
+            location: "start",
+        }],
+
+        "no-with": 2,
+        "object-curly-spacing": [2, "never"],
+        "object-shorthand": [2, "always"],
+        "one-var": [2, "never"],
+        "operator-assignment": [2, "always"],
+        "operator-linebreak": [2, "after"],
+        "padded-blocks": [2, "never"],
+        "prefer-arrow-callback": 2,
+        "prefer-const": 1,
+        "prefer-reflect": 1,
+        "prefer-spread": 2,
+        "prefer-template": 0,
+        "quote-props": [2, "as-needed"],
+        quotes: [2, "single", "avoid-escape"],
+        radix: 2,
+        "require-yield": 2,
+        semi: 2,
+
+        "semi-spacing": [2, {
+            before: false,
+            after: true,
+        }],
+
+        "sort-vars": 0,
+        "space-before-blocks": [2, "always"],
+
+        "space-before-function-paren": [2, {
+            anonymous: "always",
+            named: "never",
+        }],
+
+        "space-in-parens": [2, "never"],
+        "space-infix-ops": 2,
+
+        "space-unary-ops": [2, {
+            words: true,
+            nonwords: false,
+        }],
+
+        "spaced-comment": [2, "always"],
+        strict: [2, "never"],
+        "use-isnan": 2,
+        // "valid-jsdoc": 2,
+        "valid-typeof": 2,
+        "vars-on-top": 0,
+        "wrap-iife": [2, "outside"],
+        "wrap-regex": 2,
+
+        yoda: [2, "never", {
+            exceptRange: true,
+        }],
+    },
+}];

ghu.js

@@ -1,5 +1,5 @@
 const {resolve, join} = require('path');
-const {ghu, jszip, mapfn, read, remove, run, uglify, webpack, wrap, write} = require('ghu');
+const {ghu, jszip, mapfn, read, remove, uglify, webpack, wrap, write} = require('ghu');
 
 const NAME = 'pagemap';
 
@@ -22,33 +22,13 @@ ghu.task('clean', () => {
     return remove(`${BUILD}, ${DIST}`);
 });
 
-ghu.task('lint', () => {
-    return run('eslint .', {stdio: 'inherit'});
-});
-
 ghu.task('build:script', runtime => {
-    const webpackConfig = {
-        output: {
-            library: NAME,
-            libraryTarget: 'umd'
-        },
-        module: {
-            loaders: [
-                {
-                    include: [SRC],
-                    loader: 'babel-loader',
-                    query: {
-                        cacheDirectory: true,
-                        presets: ['es2015']
-                    }
-                }
-            ]
-        }
-    };
-
     return read(`${SRC}/${NAME}.js`)
-        .then(webpack(webpackConfig, {showStats: false}))
-        .then(uglify({compressor: {warnings: false}}))
+        .then(webpack(webpack.cfg_umd(NAME, [SRC])))
+        .then(wrap(runtime.commentJs))
+        .then(write(`${DIST}/${NAME}.js`, {overwrite: true}))
+        .then(write(`${BUILD}/${NAME}-${runtime.pkg.version}.js`, {overwrite: true}))
+        .then(uglify())
         .then(wrap(runtime.commentJs))
         .then(write(`${DIST}/${NAME}.min.js`, {overwrite: true}))
         .then(write(`${BUILD}/${NAME}-${runtime.pkg.version}.min.js`, {overwrite: true}));

package.json

@@ -1,9 +1,7 @@
 {
   "name": "pagemap",
-  "version": "0.3.0",
+  "version": "1.4.1",
   "description": "Mini map for web pages.",
-  "homepage": "https://larsjung.de/pagemap/",
-  "bugs": "https://github.com/lrsjng/pagemap/issues",
   "author": "Lars Jung <lrsjng@gmail.com> (https://larsjung.de)",
   "license": "MIT",
   "repository": {
@@ -13,16 +11,17 @@
   "main": "dist/pagemap",
   "scripts": {
     "lint": "eslint .",
+    "test": "node test",
+    "check": "npm run -s lint && npm run -s test",
     "build": "node ghu release",
-    "precommit": "npm run -s lint && npm run -s build"
+    "precommit": "npm run -s check && npm run -s build"
   },
   "devDependencies": {
-    "babel-loader": "6.2.4",
-    "babel-preset-es2015": "6.9.0",
-    "eslint": "3.0.0",
-    "ghu": "0.6.0"
-  },
-  "engines": {
-    "node": ">=6.0.0"
+    "@babel/core": "7.26.0",
+    "@babel/preset-env": "7.26.0",
+    "eslint": "9.14.0",
+    "ghu": "0.28.5",
+    "jsdom": "25.0.1",
+    "scar": "2.3.4"
   }
 }

src/demo/boxes.html

@@ -2,10 +2,15 @@
 <html>
 <head>
     <meta charset="utf-8">
-    <title>pagemap boxes demo</title>
-    <link rel="stylesheet" href="boxes.css">
+    <title>pagemap demo - boxes</title>
+    <link rel="stylesheet" href="styles.css">
 </head>
-<body class="checkers">
+<body id="boxes-demo" class="checkers">
+    <div id="banner">
+        <div>pagemap demo</div>
+        <div><a href="text.html">text</a> - <strong>boxes</strong></div>
+    </div>
+
     <div id="container">
         <div id="content" class="checkers">
             <div id="container2">
@@ -21,9 +26,7 @@
         pagemap(document.querySelector('#map'), {
             // viewport: document.querySelector('#container'),
             interval: 50,
-            styles: {
-                div: 'rgba(0,0,0,0.1)'
-            },
+            styles: { div: 'rgba(0,0,0,0.1)' },
             back: 'rgba(255,255,255,1)'
         });
     </script>

src/demo/styles.css

@@ -4,16 +4,68 @@
 }
 
 body {
+    font-family: Ubuntu, sans;
+    font-size: 16px;
+    color: #555;
+}
+
+body#boxes-demo {
     width: 2000px;
     height: 2000px;
     background-color: #eee;
 }
 
+a, a:visited, a:active {
+    color: #1d77c2;
+    text-decoration: none;
+}
+
+a:hover {
+    color: #555;
+}
+
+main {
+    margin: 3em auto 6em auto;
+    max-width: 800px;
+    line-height: 1.6em;
+}
+
+h1 {
+    font-size: 3em;
+    font-weight: normal;
+    margin: 0 0 1em;
+}
+
+h2 {
+    font-size: 1.8em;
+    font-weight: normal;
+    margin: 3em 0 1em;
+}
+
+h3 {
+    font-size: 1.2em;
+    font-weight: bold;
+    margin: 2em 0 1em;
+}
+
+#banner {
+    position: absolute;
+    left: 0;
+    top: 0;
+    font-size: 16px;
+    margin: 4px;
+    padding: 4px 12px;
+    text-align: center;
+    line-height: 24px;
+    background: rgba(255,255,255,0.8);
+    border: 1px solid rgba(0,0,0,0.5);
+}
+
 #map {
     position: fixed;
     top: 0;
     right: 0;
-    width: 120px;
+    width: 160px;
     height: 100%;
     z-index: 100;
 }

src/demo/text.css

@@ -1,47 +0,0 @@
-* {
-    margin: 0;
-    padding: 0;
-}
-
-#map {
-    position: fixed;
-    top: 0;
-    right: 0;
-    width: 200px;
-    height: 100%;
-    z-index: 100;
-}
-
-body {
-    font-family: Bitter, Ubuntu, Arial, sans;
-    font-size: 16px;
-    color: #555;
-}
-
-main {
-    margin: 3em auto 6em auto;
-    max-width: 800px;
-    line-height: 1.6em;
-}
-
-h1 {
-    font-size: 3em;
-    font-weight: normal;
-    margin: 0 0 1em;
-}
-
-h2 {
-    font-size: 1.8em;
-    font-weight: normal;
-    margin: 3em 0 1em;
-}
-
-h3 {
-    font-size: 1.2em;
-    font-weight: bold;
-    margin: 2em 0 1em;
-}
-
-a {
-    color: #1E88E5;
-}

src/demo/text.html

@@ -2,16 +2,14 @@
 <html>
 <head>
     <meta charset="utf-8">
-    <title>pagemap text demo</title>
-    <link rel="stylesheet" href="text.css">
+    <title>pagemap demo - text</title>
+    <link rel="stylesheet" href="styles.css">
 </head>
-<body>
-    <canvas id="map"></canvas>
-
-    <script src="pagemap.min.js"></script>
-    <script>
-        pagemap(document.querySelector('#map'));
-    </script>
+<body id="text-demo">
+    <div id="banner">
+        <div>pagemap demo</div>
+        <div><strong>text</strong> - <a href="boxes.html">boxes</a></div>
+    </div>
 
     <main>
         <header>
@@ -43,5 +41,12 @@
             <p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, <a href="?">eaque veritatis</a> et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
         </section>
     </main>
+
+    <canvas id="map"></canvas>
+
+    <script src="pagemap.min.js"></script>
+    <script>
+        pagemap(document.querySelector('#map'));
+    </script>
 </body>
 </html>

src/pagemap.js

@@ -1,39 +1,69 @@
-const Rect = require('./rect');
-
-const win = global.window;
-const doc = win.document;
-const body = doc.querySelector('body');
-
-const black = pc => `rgba(0,0,0,${pc / 100})`;
-const defaults = {
-    viewport: null,
-    styles: {
-        'header,footer,section,article': black(8),
-        'h1,a': black(10),
-        'h2,h3,h4': black(8)
-    },
-    back: black(2),
-    view: black(5),
-    drag: black(10),
-    interval: null
-};
-
-const _listener = (el, method, types, fn) => types.split(/\s+/).forEach(type => el[method](type, fn));
-const on = (el, types, fn) => _listener(el, 'addEventListener', types, fn);
-const off = (el, types, fn) => _listener(el, 'removeEventListener', types, fn);
-
 module.exports = (canvas, options) => {
-    const settings = Object.assign({}, defaults, options);
+    const WIN = global.window;
+    const DOC = WIN.document;
+    const DOC_EL = DOC.documentElement;
+    const BODY = DOC.querySelector('body');
+    const CTX = canvas.getContext('2d');
 
-    const context = canvas.getContext('2d');
+    const black = pc => `rgba(0,0,0,${pc / 100})`;
+    const settings = Object.assign({
+        viewport: null,
+        styles: {
+            'header,footer,section,article': black(8),
+            'h1,a': black(10),
+            'h2,h3,h4': black(8)
+        },
+        back: black(2),
+        view: black(5),
+        drag: black(10),
+        interval: null
+    }, options);
 
-    const calcScale = (() => {
+    const _listener = (el, method, types, fn) => types.split(/\s+/).forEach(type => el[method](type, fn));
+    const on = (el, types, fn) => _listener(el, 'addEventListener', types, fn);
+    const off = (el, types, fn) => _listener(el, 'removeEventListener', types, fn);
+
+    const Rect = (x, y, w, h) => { return {x, y, w, h}; };
+
+    const rect_rel_to = (rect, pos = {x: 0, y: 0}) => {
+        return Rect(rect.x - pos.x, rect.y - pos.y, rect.w, rect.h);
+    };
+
+    const rect_of_doc = () => {
+        return Rect(0, 0, DOC_EL.scrollWidth, DOC_EL.scrollHeight);
+    };
+
+    const rect_of_win = () => {
+        return Rect(WIN.pageXOffset, WIN.pageYOffset, DOC_EL.clientWidth, DOC_EL.clientHeight);
+    };
+
+    const el_get_offset = el => {
+        const br = el.getBoundingClientRect();
+        return {x: br.left + WIN.pageXOffset, y: br.top + WIN.pageYOffset};
+    };
+
+    const rect_of_el = el => {
+        const {x, y} = el_get_offset(el);
+        return Rect(x, y, el.offsetWidth, el.offsetHeight);
+    };
+
+    const rect_of_viewport = el => {
+        const {x, y} = el_get_offset(el);
+        return Rect(x + el.clientLeft, y + el.clientTop, el.clientWidth, el.clientHeight);
+    };
+
+    const rect_of_content = el => {
+        const {x, y} = el_get_offset(el);
+        return Rect(x + el.clientLeft - el.scrollLeft, y + el.clientTop - el.scrollTop, el.scrollWidth, el.scrollHeight);
+    };
+
+    const calc_scale = (() => {
         const width = canvas.clientWidth;
         const height = canvas.clientHeight;
         return (w, h) => Math.min(width / w, height / h);
     })();
 
-    const resizeCanvas = (w, h) => {
+    const resize_canvas = (w, h) => {
         canvas.width = w;
         canvas.height = h;
         canvas.style.width = `${w}px`;
@@ -41,99 +71,97 @@ module.exports = (canvas, options) => {
     };
 
     const viewport = settings.viewport;
-    const find = sel => Array.from((viewport || doc).querySelectorAll(sel));
+    const find = sel => Array.from((viewport || DOC).querySelectorAll(sel));
 
     let drag = false;
 
-    let rootRect;
-    let viewRect;
+    let root_rect;
+    let view_rect;
     let scale;
-    let dragRx;
-    let dragRy;
+    let drag_rx;
+    let drag_ry;
 
-    const drawRect = (rect, col) => {
-        if (!col) {
-            return;
+    const draw_rect = (rect, col) => {
+        if (col) {
+            CTX.beginPath();
+            CTX.rect(rect.x, rect.y, rect.w, rect.h);
+            CTX.fillStyle = col;
+            CTX.fill();
         }
-        context.beginPath();
-        context.rect(rect.x, rect.y, rect.w, rect.h);
-        context.fillStyle = col;
-        context.fill();
     };
 
-    const applyStyles = styles => {
+    const apply_styles = styles => {
         Object.keys(styles).forEach(sel => {
             const col = styles[sel];
             find(sel).forEach(el => {
-                drawRect(Rect.ofElement(el).relativeTo(rootRect), col);
+                draw_rect(rect_rel_to(rect_of_el(el), root_rect), col);
             });
         });
     };
 
     const draw = () => {
-        rootRect = viewport ? Rect.ofContent(viewport) : Rect.ofDocument();
-        viewRect = viewport ? Rect.ofViewport(viewport) : Rect.ofWindow();
-        scale = calcScale(rootRect.w, rootRect.h);
+        root_rect = viewport ? rect_of_content(viewport) : rect_of_doc();
+        view_rect = viewport ? rect_of_viewport(viewport) : rect_of_win();
+        scale = calc_scale(root_rect.w, root_rect.h);
 
-        resizeCanvas(rootRect.w * scale, rootRect.h * scale);
+        resize_canvas(root_rect.w * scale, root_rect.h * scale);
 
-        context.setTransform(1, 0, 0, 1, 0, 0);
-        context.clearRect(0, 0, canvas.width, canvas.height);
-        context.scale(scale, scale);
+        CTX.setTransform(1, 0, 0, 1, 0, 0);
+        CTX.clearRect(0, 0, canvas.width, canvas.height);
+        CTX.scale(scale, scale);
 
-        drawRect(rootRect.relativeTo(rootRect), settings.back);
-        applyStyles(settings.styles);
-        drawRect(viewRect.relativeTo(rootRect), drag ? settings.drag : settings.view);
+        draw_rect(rect_rel_to(root_rect, root_rect), settings.back);
+        apply_styles(settings.styles);
+        draw_rect(rect_rel_to(view_rect, root_rect), drag ? settings.drag : settings.view);
     };
 
-    const onDrag = ev => {
+    const on_drag = ev => {
         ev.preventDefault();
-        const cr = Rect.ofViewport(canvas);
-        const x = (ev.pageX - cr.x) / scale - viewRect.w * dragRx;
-        const y = (ev.pageY - cr.y) / scale - viewRect.h * dragRy;
+        const cr = rect_of_viewport(canvas);
+        const x = (ev.pageX - cr.x) / scale - view_rect.w * drag_rx;
+        const y = (ev.pageY - cr.y) / scale - view_rect.h * drag_ry;
 
         if (viewport) {
             viewport.scrollLeft = x;
             viewport.scrollTop = y;
         } else {
-            win.scrollTo(x, y);
+            WIN.scrollTo(x, y);
         }
         draw();
     };
 
-    const onDragEnd = ev => {
+    const on_drag_end = ev => {
         drag = false;
-
         canvas.style.cursor = 'pointer';
-        body.style.cursor = 'auto';
-        off(win, 'mousemove', onDrag);
-        off(win, 'mouseup', onDragEnd);
-        onDrag(ev);
+        BODY.style.cursor = 'auto';
+        off(WIN, 'mousemove', on_drag);
+        off(WIN, 'mouseup', on_drag_end);
+        on_drag(ev);
     };
 
-    const onDragStart = ev => {
+    const on_drag_start = ev => {
         drag = true;
 
-        const cr = Rect.ofViewport(canvas);
-        const vr = viewRect.relativeTo(rootRect);
-        dragRx = ((ev.pageX - cr.x) / scale - vr.x) / vr.w;
-        dragRy = ((ev.pageY - cr.y) / scale - vr.y) / vr.h;
-        if (dragRx < 0 || dragRx > 1 || dragRy < 0 || dragRy > 1) {
-            dragRx = 0.5;
-            dragRy = 0.5;
+        const cr = rect_of_viewport(canvas);
+        const vr = rect_rel_to(view_rect, root_rect);
+        drag_rx = ((ev.pageX - cr.x) / scale - vr.x) / vr.w;
+        drag_ry = ((ev.pageY - cr.y) / scale - vr.y) / vr.h;
+        if (drag_rx < 0 || drag_rx > 1 || drag_ry < 0 || drag_ry > 1) {
+            drag_rx = 0.5;
+            drag_ry = 0.5;
         }
 
         canvas.style.cursor = 'crosshair';
-        body.style.cursor = 'crosshair';
-        on(win, 'mousemove', onDrag);
-        on(win, 'mouseup', onDragEnd);
-        onDrag(ev);
+        BODY.style.cursor = 'crosshair';
+        on(WIN, 'mousemove', on_drag);
+        on(WIN, 'mouseup', on_drag_end);
+        on_drag(ev);
     };
 
     const init = () => {
         canvas.style.cursor = 'pointer';
-        on(canvas, 'mousedown', onDragStart);
-        on(viewport || win, 'load resize scroll', draw);
+        on(canvas, 'mousedown', on_drag_start);
+        on(viewport || WIN, 'load resize scroll', draw);
         if (settings.interval > 0) {
             setInterval(() => draw(), settings.interval);
         }

src/rect.js

@@ -1,67 +0,0 @@
-const win = global.window;
-const docEl = win.document.documentElement;
-
-const Rect = module.exports = (x, y, w, h) => {
-    return Object.assign(Object.create(Rect.prototype), {
-        x, y, w, h
-    });
-};
-
-Rect.prototype = {
-    constructor: Rect,
-
-    relativeTo(pos = {x: 0, y: 0}) {
-        return Rect(this.x - pos.x, this.y - pos.y, this.w, this.h);
-    }
-};
-
-Rect.ofDocument = () => {
-    return Rect(0, 0, docEl.scrollWidth, docEl.scrollHeight);
-};
-
-Rect.ofWindow = () => {
-    return Rect(
-        win.pageXOffset,
-        win.pageYOffset,
-        docEl.clientWidth,
-        docEl.clientHeight
-    );
-};
-
-const getOffset = el => {
-    const br = el.getBoundingClientRect();
-    return {
-        x: br.left + win.pageXOffset,
-        y: br.top + win.pageYOffset
-    };
-};
-
-Rect.ofElement = el => {
-    const {x, y} = getOffset(el);
-    return Rect(
-        x,
-        y,
-        el.offsetWidth,
-        el.offsetHeight
-    );
-};
-
-Rect.ofViewport = el => {
-    const {x, y} = getOffset(el);
-    return Rect(
-        x + el.clientLeft,
-        y + el.clientTop,
-        el.clientWidth,
-        el.clientHeight
-    );
-};
-
-Rect.ofContent = el => {
-    const {x, y} = getOffset(el);
-    return Rect(
-        x + el.clientLeft - el.scrollLeft,
-        y + el.clientTop - el.scrollTop,
-        el.scrollWidth,
-        el.scrollHeight
-    );
-};

test/index.js

@@ -0,0 +1,24 @@
+const {test, assert} = require('scar');
+const pagemap = require('../src/pagemap');
+
+if (!global.window) {
+    global.window = new (require('jsdom')).JSDOM().window;
+}
+
+test('access', () => {
+    assert.equal(typeof pagemap, 'function');
+});
+
+test('no canvas throws', () => {
+    assert.throws(() => pagemap(), /getContext/);
+    assert.throws(() => pagemap(true), /getContext/);
+    assert.throws(() => pagemap({}, {}), /getContext/);
+});
+
+// test('basic canvas', () => {
+//     const canvas = global.window.document.createElement('canvas');
+//     const res = pagemap(canvas);
+//     assert.equal(typeof res, 'object');
+// });
+
+test.cli();