From d76b3c4dd5003f07aaebf40b260b2c2cc0b634bf Mon Sep 17 00:00:00 2001 From: Lars Jung Date: Sun, 28 Apr 2019 15:05:21 +0200 Subject: [PATCH] Update. --- .eslintrc | 2 +- .gitignore | 1 + dist/pagemap.js | 188 ++++++++++++++++++++++---------------------- dist/pagemap.min.js | 4 +- package-lock.json | 14 ++-- package.json | 4 +- src/pagemap.js | 134 +++++++++++++++---------------- test/index.js | 18 ++++- 8 files changed, 187 insertions(+), 178 deletions(-) diff --git a/.eslintrc b/.eslintrc index 0b4ccc9..b3c1286 100644 --- a/.eslintrc +++ b/.eslintrc @@ -42,7 +42,7 @@ max-len: [0, 80, 4] max-nested-callbacks: [1, 3] max-params: [1, 5] ### - max-statements: [1, 32] ### + max-statements: [1, 48] ### new-cap: 0 new-parens: 2 newline-after-var: 0 diff --git a/.gitignore b/.gitignore index e80decb..e7c000d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ +/.nyc_output/ /build/ /coverage/ /local/ diff --git a/dist/pagemap.js b/dist/pagemap.js index fcbafaf..7accec0 100644 --- a/dist/pagemap.js +++ b/dist/pagemap.js @@ -1,4 +1,4 @@ -/*! pagemap v1.1.0 - https://larsjung.de/pagemap/ */ +/*! pagemap v1.2.0 - https://larsjung.de/pagemap/ */ (function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') module.exports = factory(); @@ -99,102 +99,100 @@ return /******/ (function(modules) { // webpackBootstrap /* 0 */ /***/ (function(module, exports, __webpack_require__) { -/* WEBPACK VAR INJECTION */(function(global) {var WIN = global.window; -var DOC = WIN.document; -var DOC_EL = DOC.documentElement; -var body = DOC.querySelector('body'); +/* WEBPACK VAR INJECTION */(function(global) {module.exports = function (canvas, options) { + var WIN = global.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 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 -}; - -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 black = function black(pc) { + return "rgba(0,0,0,".concat(pc / 100, ")"); }; -}; -var rect_rel_to = function rect_rel_to(rect) { - var pos = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { - x: 0, - y: 0 + 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); + }); }; - 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 on = function on(el, types, fn) { + return _listener(el, 'addEventListener', types, fn); }; -}; -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; + var off = function off(el, types, fn) { + return _listener(el, 'removeEventListener', types, fn); + }; - return Rect(x, y, el.offsetWidth, el.offsetHeight); -}; + var Rect = function Rect(x, y, w, h) { + return { + x: x, + y: y, + w: w, + h: h + }; + }; -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; + 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); + }; - return Rect(x + el.clientLeft, y + el.clientTop, el.clientWidth, el.clientHeight); -}; + var rect_of_doc = function rect_of_doc() { + return Rect(0, 0, DOC_EL.scrollWidth, DOC_EL.scrollHeight); + }; -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; + var rect_of_win = function rect_of_win() { + return Rect(WIN.pageXOffset, WIN.pageYOffset, DOC_EL.clientWidth, DOC_EL.clientHeight); + }; - return Rect(x + el.clientLeft - el.scrollLeft, y + el.clientTop - el.scrollTop, el.scrollWidth, el.scrollHeight); -}; + var el_get_offset = function el_get_offset(el) { + var br = el.getBoundingClientRect(); + return { + x: br.left + WIN.pageXOffset, + y: br.top + WIN.pageYOffset + }; + }; -module.exports = function (canvas, options) { - var settings = Object.assign({}, defaults, options); - var context = canvas.getContext('2d'); + 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; @@ -225,14 +223,12 @@ module.exports = function (canvas, options) { var drag_ry; var draw_rect = function draw_rect(rect, col) { - if (!col) { - return; + 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(); }; var apply_styles = function apply_styles(styles) { @@ -249,9 +245,9 @@ module.exports = function (canvas, options) { 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); - 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); 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); @@ -276,7 +272,7 @@ module.exports = function (canvas, options) { var on_drag_end = function on_drag_end(ev) { drag = false; canvas.style.cursor = 'pointer'; - body.style.cursor = 'auto'; + BODY.style.cursor = 'auto'; off(WIN, 'mousemove', on_drag); off(WIN, 'mouseup', on_drag_end); on_drag(ev); @@ -295,7 +291,7 @@ module.exports = function (canvas, options) { } canvas.style.cursor = 'crosshair'; - body.style.cursor = 'crosshair'; + BODY.style.cursor = 'crosshair'; on(WIN, 'mousemove', on_drag); on(WIN, 'mouseup', on_drag_end); on_drag(ev); diff --git a/dist/pagemap.min.js b/dist/pagemap.min.js index b7b8bce..364cdb1 100644 --- a/dist/pagemap.min.js +++ b/dist/pagemap.min.js @@ -1,2 +1,2 @@ -/*! pagemap v1.1.0 - https://larsjung.de/pagemap/ */ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("pagemap",[],t):"object"==typeof exports?exports.pagemap=t():e.pagemap=t()}("undefined"!=typeof self?self:this,function(){return function(n){var r={};function o(e){if(r[e])return r[e].exports;var t=r[e]={i:e,l:!1,exports:{}};return n[e].call(t.exports,t,t.exports,o),t.l=!0,t.exports}return o.m=n,o.c=r,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)o.d(n,r,function(e){return t[e]}.bind(null,r));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=0)}([function(n,e,t){(function(e){function t(e){return"rgba(0,0,0,".concat(e/100,")")}function r(t,n,e,r){return e.split(/\s+/).forEach(function(e){return t[n](e,r)})}function b(e,t,n){return r(e,"addEventListener",t,n)}function w(e,t,n){return r(e,"removeEventListener",t,n)}function j(e,t,n,r){return{x:e,y:t,w:n,h:r}}function O(e){var t=1 `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); - -const Rect = (x, y, w, h) => { return {x, y, w, h}; }; -const rect_rel_to = (rect, pos = {x: 0, y: 0}) => 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); -}; - module.exports = (canvas, options) => { - const settings = Object.assign({}, defaults, options); - const context = canvas.getContext('2d'); + const WIN = global.window; + const DOC = WIN.document; + const DOC_EL = DOC.documentElement; + const BODY = DOC.querySelector('body'); + const CTX = 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 _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; @@ -81,13 +82,12 @@ module.exports = (canvas, options) => { let drag_ry; const draw_rect = (rect, col) => { - if (!col) { - return; + 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 apply_styles = styles => { @@ -106,9 +106,9 @@ module.exports = (canvas, options) => { 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); draw_rect(rect_rel_to(root_rect, root_rect), settings.back); apply_styles(settings.styles); @@ -133,7 +133,7 @@ module.exports = (canvas, options) => { const on_drag_end = ev => { drag = false; canvas.style.cursor = 'pointer'; - body.style.cursor = 'auto'; + BODY.style.cursor = 'auto'; off(WIN, 'mousemove', on_drag); off(WIN, 'mouseup', on_drag_end); on_drag(ev); @@ -152,7 +152,7 @@ module.exports = (canvas, options) => { } canvas.style.cursor = 'crosshair'; - body.style.cursor = 'crosshair'; + BODY.style.cursor = 'crosshair'; on(WIN, 'mousemove', on_drag); on(WIN, 'mouseup', on_drag_end); on_drag(ev); diff --git a/test/index.js b/test/index.js index 79e8b3f..513f36e 100644 --- a/test/index.js +++ b/test/index.js @@ -1,12 +1,24 @@ +const {test, assert} = require('scar'); +const pagemap = require('../src/pagemap'); + if (!global.window) { global.window = new (require('jsdom')).JSDOM().window; } -const {test, assert} = require('scar'); -const pagemap = require('../src/pagemap'); - 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();