├── .babelrc ├── .browserslistrc ├── .gitignore ├── .prettierrc ├── .vscode └── settings.json ├── _demo ├── perf.html ├── perf2.html ├── style.css ├── test.html └── unpkg-test.html ├── bundle.js ├── coverage ├── clover.xml ├── coverage-final.json ├── lcov-report │ ├── base.css │ ├── block-navigation.js │ ├── createContextHistory.js.html │ ├── createObservableContext.js.html │ ├── defaults.js.html │ ├── domUtils.js.html │ ├── favicon.png │ ├── index.html │ ├── index.js.html │ ├── observeElDimensions.js.html │ ├── prettify.css │ ├── prettify.js │ ├── resizeCanvas.js.html │ ├── restoreFromHistory.js.html │ ├── setCanvasHTMLElementDimensions.js.html │ ├── sort-arrow-sprite.png │ ├── sorter.js │ ├── styles.js.html │ └── transformContextMatrix.js.html └── lcov.info ├── dist ├── cjs │ ├── index.js │ └── index.js.map ├── esm │ ├── index.js │ └── index.js.map ├── types │ ├── createContextHistory.d.ts │ ├── createObservableContext.d.ts │ ├── defaults.d.ts │ ├── domUtils.d.ts │ ├── index.d.ts │ ├── observeElDimensions.d.ts │ ├── resizeCanvas.d.ts │ ├── restoreFromHistory.d.ts │ ├── setCanvasHTMLElementDimensions.d.ts │ ├── styles.d.ts │ └── transformContextMatrix.d.ts ├── vb-canvas.min.js └── vb-canvas.min.js.map ├── jest.config.js ├── package-lock.json ├── package.json ├── readme.md ├── rollup.config.js ├── src ├── createContextHistory.js ├── createObservableContext.js ├── defaults.js ├── domUtils.js ├── index.js ├── observeElDimensions.js ├── resizeCanvas.js ├── restoreFromHistory.js ├── setCanvasHTMLElementDimensions.js ├── styles.js └── transformContextMatrix.js ├── tests └── VBCanvas.test.js ├── tsconfig.json └── vb-og.png /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"] 3 | } 4 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 0.25% 2 | not dead -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 2, 3 | "singleQuote": true 4 | } 5 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.formatOnSave": true, 3 | "editor.defaultFormatter": "esbenp.prettier-vscode", 4 | "editor.tabSize": 2 5 | } 6 | -------------------------------------------------------------------------------- /_demo/perf.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 19 | 20 | 21 | 22 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /_demo/perf2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 24 | 25 | 26 |

27 | 28 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /_demo/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/georgedoescode/VBCanvas/8d1cac759cccf90b2a77ed45c70ed6ca771b0093/_demo/style.css -------------------------------------------------------------------------------- /_demo/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | VBCanvas Demo 7 | 8 | 40 | 41 | 42 |

43 | 47 |

48 | 49 | 260 | 261 | 262 | -------------------------------------------------------------------------------- /_demo/unpkg-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | VBCanvas Demo 7 | 8 | 20 | 21 | 22 |

23 | 24 | 25 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /bundle.js: -------------------------------------------------------------------------------- 1 | (function (global, factory) { 2 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : 3 | typeof define === 'function' && define.amd ? define(['exports'], factory) : 4 | (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.vbcanvas = {})); 5 | }(this, (function (exports) { 'use strict'; 6 | 7 | function test() { 8 | 9 | } 10 | 11 | exports.test = test; 12 | 13 | Object.defineProperty(exports, '__esModule', { value: true }); 14 | 15 | }))); 16 | -------------------------------------------------------------------------------- /coverage/clover.xml: -------------------------------------------------------------------------------- 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 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | -------------------------------------------------------------------------------- /coverage/lcov-report/base.css: -------------------------------------------------------------------------------- 1 | body, html { 2 | margin:0; padding: 0; 3 | height: 100%; 4 | } 5 | body { 6 | font-family: Helvetica Neue, Helvetica, Arial; 7 | font-size: 14px; 8 | color:#333; 9 | } 10 | .small { font-size: 12px; } 11 | *, *:after, *:before { 12 | -webkit-box-sizing:border-box; 13 | -moz-box-sizing:border-box; 14 | box-sizing:border-box; 15 | } 16 | h1 { font-size: 20px; margin: 0;} 17 | h2 { font-size: 14px; } 18 | pre { 19 | font: 12px/1.4 Consolas, "Liberation Mono", Menlo, Courier, monospace; 20 | margin: 0; 21 | padding: 0; 22 | -moz-tab-size: 2; 23 | -o-tab-size: 2; 24 | tab-size: 2; 25 | } 26 | a { color:#0074D9; text-decoration:none; } 27 | a:hover { text-decoration:underline; } 28 | .strong { font-weight: bold; } 29 | .space-top1 { padding: 10px 0 0 0; } 30 | .pad2y { padding: 20px 0; } 31 | .pad1y { padding: 10px 0; } 32 | .pad2x { padding: 0 20px; } 33 | .pad2 { padding: 20px; } 34 | .pad1 { padding: 10px; } 35 | .space-left2 { padding-left:55px; } 36 | .space-right2 { padding-right:20px; } 37 | .center { text-align:center; } 38 | .clearfix { display:block; } 39 | .clearfix:after { 40 | content:''; 41 | display:block; 42 | height:0; 43 | clear:both; 44 | visibility:hidden; 45 | } 46 | .fl { float: left; } 47 | @media only screen and (max-width:640px) { 48 | .col3 { width:100%; max-width:100%; } 49 | .hide-mobile { display:none!important; } 50 | } 51 | 52 | .quiet { 53 | color: #7f7f7f; 54 | color: rgba(0,0,0,0.5); 55 | } 56 | .quiet a { opacity: 0.7; } 57 | 58 | .fraction { 59 | font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; 60 | font-size: 10px; 61 | color: #555; 62 | background: #E8E8E8; 63 | padding: 4px 5px; 64 | border-radius: 3px; 65 | vertical-align: middle; 66 | } 67 | 68 | div.path a:link, div.path a:visited { color: #333; } 69 | table.coverage { 70 | border-collapse: collapse; 71 | margin: 10px 0 0 0; 72 | padding: 0; 73 | } 74 | 75 | table.coverage td { 76 | margin: 0; 77 | padding: 0; 78 | vertical-align: top; 79 | } 80 | table.coverage td.line-count { 81 | text-align: right; 82 | padding: 0 5px 0 20px; 83 | } 84 | table.coverage td.line-coverage { 85 | text-align: right; 86 | padding-right: 10px; 87 | min-width:20px; 88 | } 89 | 90 | table.coverage td span.cline-any { 91 | display: inline-block; 92 | padding: 0 5px; 93 | width: 100%; 94 | } 95 | .missing-if-branch { 96 | display: inline-block; 97 | margin-right: 5px; 98 | border-radius: 3px; 99 | position: relative; 100 | padding: 0 4px; 101 | background: #333; 102 | color: yellow; 103 | } 104 | 105 | .skip-if-branch { 106 | display: none; 107 | margin-right: 10px; 108 | position: relative; 109 | padding: 0 4px; 110 | background: #ccc; 111 | color: white; 112 | } 113 | .missing-if-branch .typ, .skip-if-branch .typ { 114 | color: inherit !important; 115 | } 116 | .coverage-summary { 117 | border-collapse: collapse; 118 | width: 100%; 119 | } 120 | .coverage-summary tr { border-bottom: 1px solid #bbb; } 121 | .keyline-all { border: 1px solid #ddd; } 122 | .coverage-summary td, .coverage-summary th { padding: 10px; } 123 | .coverage-summary tbody { border: 1px solid #bbb; } 124 | .coverage-summary td { border-right: 1px solid #bbb; } 125 | .coverage-summary td:last-child { border-right: none; } 126 | .coverage-summary th { 127 | text-align: left; 128 | font-weight: normal; 129 | white-space: nowrap; 130 | } 131 | .coverage-summary th.file { border-right: none !important; } 132 | .coverage-summary th.pct { } 133 | .coverage-summary th.pic, 134 | .coverage-summary th.abs, 135 | .coverage-summary td.pct, 136 | .coverage-summary td.abs { text-align: right; } 137 | .coverage-summary td.file { white-space: nowrap; } 138 | .coverage-summary td.pic { min-width: 120px !important; } 139 | .coverage-summary tfoot td { } 140 | 141 | .coverage-summary .sorter { 142 | height: 10px; 143 | width: 7px; 144 | display: inline-block; 145 | margin-left: 0.5em; 146 | background: url(sort-arrow-sprite.png) no-repeat scroll 0 0 transparent; 147 | } 148 | .coverage-summary .sorted .sorter { 149 | background-position: 0 -20px; 150 | } 151 | .coverage-summary .sorted-desc .sorter { 152 | background-position: 0 -10px; 153 | } 154 | .status-line { height: 10px; } 155 | /* yellow */ 156 | .cbranch-no { background: yellow !important; color: #111; } 157 | /* dark red */ 158 | .red.solid, .status-line.low, .low .cover-fill { background:#C21F39 } 159 | .low .chart { border:1px solid #C21F39 } 160 | .highlighted, 161 | .highlighted .cstat-no, .highlighted .fstat-no, .highlighted .cbranch-no{ 162 | background: #C21F39 !important; 163 | } 164 | /* medium red */ 165 | .cstat-no, .fstat-no, .cbranch-no, .cbranch-no { background:#F6C6CE } 166 | /* light red */ 167 | .low, .cline-no { background:#FCE1E5 } 168 | /* light green */ 169 | .high, .cline-yes { background:rgb(230,245,208) } 170 | /* medium green */ 171 | .cstat-yes { background:rgb(161,215,106) } 172 | /* dark green */ 173 | .status-line.high, .high .cover-fill { background:rgb(77,146,33) } 174 | .high .chart { border:1px solid rgb(77,146,33) } 175 | /* dark yellow (gold) */ 176 | .status-line.medium, .medium .cover-fill { background: #f9cd0b; } 177 | .medium .chart { border:1px solid #f9cd0b; } 178 | /* light yellow */ 179 | .medium { background: #fff4c2; } 180 | 181 | .cstat-skip { background: #ddd; color: #111; } 182 | .fstat-skip { background: #ddd; color: #111 !important; } 183 | .cbranch-skip { background: #ddd !important; color: #111; } 184 | 185 | span.cline-neutral { background: #eaeaea; } 186 | 187 | .coverage-summary td.empty { 188 | opacity: .5; 189 | padding-top: 4px; 190 | padding-bottom: 4px; 191 | line-height: 1; 192 | color: #888; 193 | } 194 | 195 | .cover-fill, .cover-empty { 196 | display:inline-block; 197 | height: 12px; 198 | } 199 | .chart { 200 | line-height: 0; 201 | } 202 | .cover-empty { 203 | background: white; 204 | } 205 | .cover-full { 206 | border-right: none !important; 207 | } 208 | pre.prettyprint { 209 | border: none !important; 210 | padding: 0 !important; 211 | margin: 0 !important; 212 | } 213 | .com { color: #999 !important; } 214 | .ignore-none { color: #999; font-weight: normal; } 215 | 216 | .wrapper { 217 | min-height: 100%; 218 | height: auto !important; 219 | height: 100%; 220 | margin: 0 auto -48px; 221 | } 222 | .footer, .push { 223 | height: 48px; 224 | } 225 | -------------------------------------------------------------------------------- /coverage/lcov-report/block-navigation.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | var jumpToCode = (function init() { 3 | // Classes of code we would like to highlight in the file view 4 | var missingCoverageClasses = ['.cbranch-no', '.cstat-no', '.fstat-no']; 5 | 6 | // Elements to highlight in the file listing view 7 | var fileListingElements = ['td.pct.low']; 8 | 9 | // We don't want to select elements that are direct descendants of another match 10 | var notSelector = ':not(' + missingCoverageClasses.join('):not(') + ') > '; // becomes `:not(a):not(b) > ` 11 | 12 | // Selecter that finds elements on the page to which we can jump 13 | var selector = 14 | fileListingElements.join(', ') + 15 | ', ' + 16 | notSelector + 17 | missingCoverageClasses.join(', ' + notSelector); // becomes `:not(a):not(b) > a, :not(a):not(b) > b` 18 | 19 | // The NodeList of matching elements 20 | var missingCoverageElements = document.querySelectorAll(selector); 21 | 22 | var currentIndex; 23 | 24 | function toggleClass(index) { 25 | missingCoverageElements 26 | .item(currentIndex) 27 | .classList.remove('highlighted'); 28 | missingCoverageElements.item(index).classList.add('highlighted'); 29 | } 30 | 31 | function makeCurrent(index) { 32 | toggleClass(index); 33 | currentIndex = index; 34 | missingCoverageElements.item(index).scrollIntoView({ 35 | behavior: 'smooth', 36 | block: 'center', 37 | inline: 'center' 38 | }); 39 | } 40 | 41 | function goToPrevious() { 42 | var nextIndex = 0; 43 | if (typeof currentIndex !== 'number' || currentIndex === 0) { 44 | nextIndex = missingCoverageElements.length - 1; 45 | } else if (missingCoverageElements.length > 1) { 46 | nextIndex = currentIndex - 1; 47 | } 48 | 49 | makeCurrent(nextIndex); 50 | } 51 | 52 | function goToNext() { 53 | var nextIndex = 0; 54 | 55 | if ( 56 | typeof currentIndex === 'number' && 57 | currentIndex < missingCoverageElements.length - 1 58 | ) { 59 | nextIndex = currentIndex + 1; 60 | } 61 | 62 | makeCurrent(nextIndex); 63 | } 64 | 65 | return function jump(event) { 66 | switch (event.which) { 67 | case 78: // n 68 | case 74: // j 69 | goToNext(); 70 | break; 71 | case 66: // b 72 | case 75: // k 73 | case 80: // p 74 | goToPrevious(); 75 | break; 76 | } 77 | }; 78 | })(); 79 | window.addEventListener('keydown', jumpToCode); 80 | -------------------------------------------------------------------------------- /coverage/lcov-report/createContextHistory.js.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Code coverage report for createContextHistory.js 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | 19 | 20 |

21 |

22 |

All files createContextHistory.js

23 |

24 | 25 |

26 | 37.5% 27 | Statements 28 | 3/8 29 |

30 | 31 | 32 |

33 | 100% 34 | Branches 35 | 0/0 36 |

37 | 38 | 39 |

40 | 20% 41 | Functions 42 | 1/5 43 |

44 | 45 | 46 |

47 | 37.5% 48 | Lines 49 | 3/8 50 |

51 | 52 | 53 |

54 |

55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |

57 |

58 |

59 |


 60 | 1
 61 | 2
 62 | 3
 63 | 4
 64 | 5
 65 | 6
 66 | 7
 67 | 8
 68 | 9
 69 | 10
 70 | 11
 71 | 12
 72 | 13
 73 | 14
 74 | 15
 75 | 16
 76 | 17
 77 | 18
 78 | 19
 79 | 20
 80 | 21
 81 | 22
 82 | 23
 83 | 24  
 84 | 4x
 85 | 4x
 86 |  
 87 | 4x
 88 |  
 89 |  
 90 |  
 91 |  
 92 |  
 93 |  
 94 |  
 95 |  
 96 |  
 97 |  
 98 |  
 99 |  
100 |  
101 |  
102 |  
103 |  
104 |  
105 |  
106 |   function createContextHistory() {
107 |   const store = new Map();
108 |   let position = 0;
109 |  
110 |   return {
111 |     get entries() {
112 |       return store.values();
113 |     },
114 |     get size() {
115 |       return store.size;
116 |     },
117 |     push(type, name, args) {
118 |       store.set(position, { type, name, args });
119 |  
120 |       position++;
121 |     },
122 |     clear() {
123 |       store.clear();
124 |     },
125 |   };
126 | }
127 |  
128 | export { createContextHistory };
129 |

130 | 131 |

132 |

133 | 138 | 139 | 140 | 145 | 146 | 147 | 148 | 149 | -------------------------------------------------------------------------------- /coverage/lcov-report/createObservableContext.js.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Code coverage report for createObservableContext.js 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | 19 | 20 |

21 |

22 |

All files createObservableContext.js

23 |

24 | 25 |

26 | 11.11% 27 | Statements 28 | 1/9 29 |

30 | 31 | 32 |

33 | 0% 34 | Branches 35 | 0/2 36 |

37 | 38 | 39 |

40 | 25% 41 | Functions 42 | 1/4 43 |

44 | 45 | 46 |

47 | 11.11% 48 | Lines 49 | 1/9 50 |

51 | 52 | 53 |

54 |

55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |

57 |

58 |

59 |


 60 | 1
 61 | 2
 62 | 3
 63 | 4
 64 | 5
 65 | 6
 66 | 7
 67 | 8
 68 | 9
 69 | 10
 70 | 11
 71 | 12
 72 | 13
 73 | 14
 74 | 15
 75 | 16
 76 | 17
 77 | 18
 78 | 19
 79 | 20
 80 | 21
 81 | 22
 82 | 23
 83 | 24
 84 | 25
 85 | 26  
 86 | 4x
 87 |  
 88 |  
 89 |  
 90 |  
 91 |  
 92 |  
 93 |  
 94 |  
 95 |  
 96 |  
 97 |  
 98 |  
 99 |  
100 |  
101 |  
102 |  
103 |  
104 |  
105 |  
106 |  
107 |  
108 |  
109 |  
110 |   function createObservableContext(baseContext, observe) {
111 |   return new Proxy(baseContext, {
112 |     get(target, name) {
113 |       if (typeof target[name] === 'function') {
114 |         return function () {
115 |           target[name].apply(target, arguments);
116 |  
117 |           observe('function', name, [...arguments]);
118 |         };
119 |       } else {
120 |         return target[name];
121 |       }
122 |     },
123 |     set(target, name, val) {
124 |       target[name] = val;
125 |  
126 |       observe('set', name, val);
127 |  
128 |       // succesful operation ✅
129 |       return true;
130 |     },
131 |   });
132 | }
133 |  
134 | export { createObservableContext };
135 |

136 | 137 |

138 |

139 | 144 | 145 | 146 | 151 | 152 | 153 | 154 | 155 | -------------------------------------------------------------------------------- /coverage/lcov-report/defaults.js.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Code coverage report for defaults.js 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | 19 | 20 |

21 |

22 |

All files defaults.js

23 |

24 | 25 |

26 | 0% 27 | Statements 28 | 0/0 29 |

30 | 31 | 32 |

33 | 0% 34 | Branches 35 | 1/2 36 |

37 | 38 | 39 |

40 | 0% 41 | Functions 42 | 0/0 43 |

44 | 45 | 46 |

47 | 0% 48 | Lines 49 | 0/0 50 |

51 | 52 | 53 |

54 |

55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |

57 |

58 |

59 |


 60 | 1
 61 | 2
 62 | 3
 63 | 4
 64 | 5
 65 | 6
 66 | 7
 67 | 8
 68 | 9
 69 | 10  
 70 |  
 71 |  
 72 |  
 73 |  
 74 |  
 75 |  
 76 |  
 77 |  
 78 |   export default {
 79 |   target: document.body,
 80 |   viewBox: [0, 0, 300, 150],
 81 |   autoAspectRatio: true,
 82 |   scaleMode: 'fit',
 83 |   resolution: window.devicePixelRatio || 1,
 84 |   static: false,
 85 |   id: Math.random(),
 86 | };
 87 |

88 | 89 |

90 |

91 | 96 | 97 | 98 | 103 | 104 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /coverage/lcov-report/domUtils.js.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Code coverage report for domUtils.js 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | 19 | 20 |

21 |

22 |

All files domUtils.js

23 |

24 | 25 |

26 | 100% 27 | Statements 28 | 10/10 29 |

30 | 31 | 32 |

33 | 100% 34 | Branches 35 | 2/2 36 |

37 | 38 | 39 |

40 | 100% 41 | Functions 42 | 5/5 43 |

44 | 45 | 46 |

47 | 100% 48 | Lines 49 | 10/10 50 |

51 | 52 | 53 |

54 |

55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |

57 |

58 |

59 |


 60 | 1
 61 | 2
 62 | 3
 63 | 4
 64 | 5
 65 | 6
 66 | 7
 67 | 8
 68 | 9
 69 | 10
 70 | 11
 71 | 12
 72 | 13
 73 | 14
 74 | 15
 75 | 16
 76 | 17
 77 | 18
 78 | 19
 79 | 20
 80 | 21
 81 | 22
 82 | 23
 83 | 24
 84 | 25
 85 | 26
 86 | 27
 87 | 28
 88 | 29
 89 | 30
 90 | 31
 91 | 32
 92 | 33
 93 | 34
 94 | 35
 95 | 36
 96 | 37
 97 | 38
 98 | 39
 99 | 40
100 | 41  
101 | 4x
102 | 1x
103 |  
104 | 3x
105 |  
106 |  
107 |  
108 |  
109 | 4x
110 |  
111 | 4x
112 | 4x
113 |  
114 | 4x
115 |  
116 |  
117 |  
118 | 4x
119 |  
120 |  
121 |  
122 | 4x
123 |  
124 |  
125 |  
126 |  
127 |  
128 |  
129 |  
130 | 4x
131 |  
132 |  
133 |  
134 |  
135 |  
136 |  
137 |  
138 |  
139 |  
140 |   function resolveTarget(target) {
141 |   if (typeof target === 'string') {
142 |     return document.querySelector(target);
143 |   } else {
144 |     return target;
145 |   }
146 | }
147 |  
148 | function createCanvasHTMLElement(id) {
149 |   const el = document.createElement('canvas');
150 |  
151 |   el.classList.add('vb-canvas');
152 |   el.classList.add(id);
153 |  
154 |   return el;
155 | }
156 |  
157 | function getCanvasContext(canvasHTMLElement) {
158 |   return canvasHTMLElement.getContext('2d');
159 | }
160 |  
161 | function mountCanvasToDOM(target, el) {
162 |   target.appendChild(el);
163 | }
164 |  
165 | // https://gist.github.com/gordonbrander/2230317
166 | function randomID() {
167 |   // Math.random should be unique because of its seeding algorithm.
168 |   // Convert it to base 36 (numbers + letters), and grab the first 9 characters
169 |   // after the decimal.
170 |   return '_' + Math.random().toString(36).substr(2, 9);
171 | }
172 |  
173 | export {
174 |   resolveTarget,
175 |   createCanvasHTMLElement,
176 |   getCanvasContext,
177 |   mountCanvasToDOM,
178 |   randomID,
179 | };
180 |

181 | 182 |

183 |

184 | 189 | 190 | 191 | 196 | 197 | 198 | 199 | 200 | -------------------------------------------------------------------------------- /coverage/lcov-report/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/georgedoescode/VBCanvas/8d1cac759cccf90b2a77ed45c70ed6ca771b0093/coverage/lcov-report/favicon.png -------------------------------------------------------------------------------- /coverage/lcov-report/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Code coverage report for All files 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | 19 | 20 |

21 |

22 |

All files

23 |

24 | 25 |

26 | 74% 27 | Statements 28 | 74/100 29 |

30 | 31 | 32 |

33 | 41.67% 34 | Branches 35 | 10/24 36 |

37 | 38 | 39 |

40 | 65.52% 41 | Functions 42 | 19/29 43 |

44 | 45 | 46 |

47 | 74.75% 48 | Lines 49 | 74/99 50 |

51 | 52 | 53 |

54 |

55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |

57 |

58 |

59 |

60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 |

File		Statements		Branches		Functions		Lines
createContextHistory.js	78 \| 79 \|	37.5%	3/8	100%	0/0	20%	1/5	37.5%	3/8
createObservableContext.js	93 \| 94 \|	11.11%	1/9	0%	0/2	25%	1/4	11.11%	1/9
defaults.js	108 \| 109 \|	0%	0/0	0%	1/2	0%	0/0	0%	0/0
domUtils.js	123 \| 124 \|	100%	10/10	100%	2/2	100%	5/5	100%	10/10
index.js	138 \| 139 \|	93.75%	15/16	50%	1/2	66.67%	2/3	93.75%	15/16
observeElDimensions.js	153 \| 154 \|	37.5%	3/8	0%	0/4	50%	1/2	37.5%	3/8
resizeCanvas.js	168 \| 169 \|	75%	3/4	50%	1/2	100%	1/1	75%	3/4
restoreFromHistory.js	183 \| 184 \|	0%	0/4	0%	0/2	0%	0/1	0%	0/4
setCanvasHTMLElementDimensions.js	198 \| 199 \|	90%	9/10	50%	2/4	100%	2/2	100%	9/9
styles.js	213 \| 214 \|	100%	11/11	100%	2/2	100%	3/3	100%	11/11
transformContextMatrix.js	228 \| 229 \|	95%	19/20	50%	1/2	100%	3/3	95%	19/20

242 |

243 |

244 |

245 | 250 | 251 | 252 | 257 | 258 | 259 | 260 | 261 | -------------------------------------------------------------------------------- /coverage/lcov-report/index.js.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Code coverage report for index.js 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | 19 | 20 |

21 |

22 |

All files index.js

23 |

24 | 25 |

26 | 93.75% 27 | Statements 28 | 15/16 29 |

30 | 31 | 32 |

33 | 50% 34 | Branches 35 | 1/2 36 |

37 | 38 | 39 |

40 | 66.67% 41 | Functions 42 | 2/3 43 |

44 | 45 | 46 |

47 | 93.75% 48 | Lines 49 | 15/16 50 |

51 | 52 | 53 |

54 |

55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |

57 |

58 |

59 |


 60 | 1
 61 | 2
 62 | 3
 63 | 4
 64 | 5
 65 | 6
 66 | 7
 67 | 8
 68 | 9
 69 | 10
 70 | 11
 71 | 12
 72 | 13
 73 | 14
 74 | 15
 75 | 16
 76 | 17
 77 | 18
 78 | 19
 79 | 20
 80 | 21
 81 | 22
 82 | 23
 83 | 24
 84 | 25
 85 | 26
 86 | 27
 87 | 28
 88 | 29
 89 | 30
 90 | 31
 91 | 32
 92 | 33
 93 | 34
 94 | 35
 95 | 36
 96 | 37
 97 | 38
 98 | 39
 99 | 40
100 | 41
101 | 42
102 | 43
103 | 44
104 | 45
105 | 46
106 | 47
107 | 48
108 | 49
109 | 50
110 | 51
111 | 52
112 | 53
113 | 54
114 | 55
115 | 56
116 | 57
117 | 58
118 | 59
119 | 60  
120 |  
121 |  
122 |  
123 |  
124 |  
125 |  
126 |  
127 |  
128 |  
129 |  
130 |  
131 |  
132 |  
133 |  
134 |  
135 | 1x
136 |  
137 |  
138 | 4x
139 | 4x
140 |  
141 | 4x
142 |  
143 | 4x
144 |  
145 | 4x
146 | 4x
147 |  
148 | 4x
149 | 4x
150 |  
151 |  
152 |  
153 |  
154 |  
155 |  
156 | 4x
157 |  
158 | 4x
159 | 4x
160 |  
161 |  
162 |  
163 |  
164 |  
165 |  
166 |  
167 |  
168 | 4x
169 | 4x
170 |  
171 | 4x
172 |  
173 |  
174 |  
175 |  
176 |  
177 |  
178 |   import DEFAULTS from './defaults';
179 |  
180 | import {
181 |   resolveTarget,
182 |   createCanvasHTMLElement,
183 |   getCanvasContext,
184 |   mountCanvasToDOM,
185 |   randomID,
186 | } from './domUtils';
187 |  
188 | import { createContextHistory } from './createContextHistory';
189 | import { createObservableContext } from './createObservableContext';
190 | import { observeElDimensions } from './observeElDimensions';
191 | import { resizeCanvas } from './resizeCanvas';
192 | import { createCanvasStyleSheet, createBaseCanvasStyles } from './styles';
193 |  
194 | createBaseCanvasStyles();
195 |  
196 | function createCanvas(opts) {
197 |   opts = Object.assign({}, DEFAULTS, opts);
198 |   opts.target = resolveTarget(opts.target);
199 |  
200 |   const canvasID = randomID();
201 |  
202 |   const history = createContextHistory();
203 |  
204 |   const canvasHTMLElement = createCanvasHTMLElement(canvasID);
205 |   const canvasStyleSheet = createCanvasStyleSheet(canvasID);
206 |  
207 |   const baseContext = getCanvasContext(canvasHTMLElement);
208 |   const observableContext = createObservableContext(
209 |     baseContext,
210 |     (type, name, args) => {
211 |       history.push(type, name, args);
212 |     }
213 |   );
214 |  
215 |   mountCanvasToDOM(opts.target, canvasHTMLElement);
216 |  
217 |   const resize = () =>
218 |     resizeCanvas({
219 |       opts,
220 |       canvasID,
221 |       canvasHTMLElement,
222 |       canvasStyleSheet,
223 |       baseContext,
224 |       history,
225 |     });
226 |  
227 |   resize();
228 |   observeElDimensions(canvasHTMLElement, resize);
229 |  
230 |   return {
231 |     el: canvasHTMLElement,
232 |     ctx: opts.static ? observableContext : baseContext,
233 |   };
234 | }
235 |  
236 | export { createCanvas };
237 |

238 | 239 |

240 |

241 | 246 | 247 | 248 | 253 | 254 | 255 | 256 | 257 | -------------------------------------------------------------------------------- /coverage/lcov-report/observeElDimensions.js.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Code coverage report for observeElDimensions.js 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | 19 | 20 |

21 |

22 |

All files observeElDimensions.js

23 |

24 | 25 |

26 | 37.5% 27 | Statements 28 | 3/8 29 |

30 | 31 | 32 |

33 | 0% 34 | Branches 35 | 0/4 36 |

37 | 38 | 39 |

40 | 50% 41 | Functions 42 | 1/2 43 |

44 | 45 | 46 |

47 | 37.5% 48 | Lines 49 | 3/8 50 |

51 | 52 | 53 |

54 |

55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |

57 |

58 |

59 |


 60 | 1
 61 | 2
 62 | 3
 63 | 4
 64 | 5
 65 | 6
 66 | 7
 67 | 8
 68 | 9
 69 | 10
 70 | 11
 71 | 12
 72 | 13
 73 | 14
 74 | 15
 75 | 16
 76 | 17
 77 | 18
 78 | 19
 79 | 20
 80 | 21
 81 | 22
 82 | 23
 83 | 24
 84 | 25
 85 | 26  
 86 |  
 87 |  
 88 |  
 89 | 4x
 90 |  
 91 | 4x
 92 |  
 93 |  
 94 |  
 95 |  
 96 |  
 97 |  
 98 |  
 99 |  
100 |  
101 |  
102 |  
103 |  
104 |  
105 |  
106 | 4x
107 |  
108 |  
109 |  
110 |   import ResizeObserver from 'resize-observer-polyfill';
111 | import { debounce } from 'lodash-es';
112 |  
113 | function observeElDimensions(el, callback) {
114 |   let { width: prevWidth, height: prevHeight } = el.getBoundingClientRect();
115 |  
116 |   const resizeObserver = new ResizeObserver(
117 |     debounce(([entry]) => {
118 |       const { width, height } = entry.target.getBoundingClientRect();
119 |  
120 |       // prevent infinite resize loops if canvas CSS dimensions are not explicitely set
121 |  
122 |       if (width !== prevWidth || height !== prevHeight) {
123 |         callback(entry);
124 |  
125 |         prevWidth = width;
126 |         prevHeight = height;
127 |       }
128 |     }, 500)
129 |   );
130 |  
131 |   resizeObserver.observe(el);
132 | }
133 |  
134 | export { observeElDimensions };
135 |

136 | 137 |

138 |

139 | 144 | 145 | 146 | 151 | 152 | 153 | 154 | 155 | -------------------------------------------------------------------------------- /coverage/lcov-report/prettify.css: -------------------------------------------------------------------------------- 1 | .pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee} 2 | -------------------------------------------------------------------------------- /coverage/lcov-report/prettify.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | window.PR_SHOULD_USE_CONTINUATION=true;(function(){var h=["break,continue,do,else,for,if,return,while"];var u=[h,"auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"];var p=[u,"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"];var l=[p,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,dynamic_cast,explicit,export,friend,inline,late_check,mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"];var x=[p,"abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient"];var R=[x,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"];var r="all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,true,try,unless,until,when,while,yes";var w=[p,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"];var s="caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END";var I=[h,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"];var f=[h,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"];var H=[h,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"];var A=[l,R,w,s+I,f,H];var e=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/;var C="str";var z="kwd";var j="com";var O="typ";var G="lit";var L="pun";var F="pln";var m="tag";var E="dec";var J="src";var P="atn";var n="atv";var N="nocode";var M="(?:^^\\.?|[+-]|\\!|\\!=|\\!==|\\#|\\%|\\%=|&|&&|&&=|&=|\$|\\*|\\*=|\\+=|\\,|\\-=|\\->|\\/|\\/=|:|::|\\;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|\\?|\\@|\\[|\\^|\\^=|\\^\\^|\\^\\^=|\\{|\\||\\|=|\\|\\||\\|\\|=|\\~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*";function k(Z){var ad=0;var S=false;var ac=false;for(var V=0,U=Z.length;V122)){if(!(al<65||ag>90)){af.push([Math.max(65,ag)|32,Math.min(al,90)|32])}if(!(al<97||ag>122)){af.push([Math.max(97,ag)&~32,Math.min(al,122)&~32])}}}}af.sort(function(av,au){return(av[0]-au[0])||(au[1]-av[1])});var ai=[];var ap=[NaN,NaN];for(var ar=0;arat[0]){if(at[1]+1>at[0]){an.push("-")}an.push(T(at[1]))}}an.push("]");return an.join("")}function W(al){var aj=al.source.match(new RegExp("(?:\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]|\\\\u[A-Fa-f0-9]{4}|\\\\x[A-Fa-f0-9]{2}|\\\\[0-9]+|\\\\[^ux0-9]|\\(\\?[:!=]|[\\(\$\\^]|[^\\x5B\\x5C\$\$\\^]+)","g"));var ah=aj.length;var an=[];for(var ak=0,am=0;ak=2&&ai==="["){aj[ak]=X(ag)}else{if(ai!=="\\"){aj[ak]=ag.replace(/[a-zA-Z]/g,function(ao){var ap=ao.charCodeAt(0);return"["+String.fromCharCode(ap&~32,ap|32)+"]"})}}}}return aj.join("")}var aa=[];for(var V=0,U=Z.length;V=0;){S[ac.charAt(ae)]=Y}}var af=Y[1];var aa=""+af;if(!ag.hasOwnProperty(aa)){ah.push(af);ag[aa]=null}}ah.push(/[\0-\uffff]/);V=k(ah)})();var X=T.length;var W=function(ah){var Z=ah.sourceCode,Y=ah.basePos;var ad=[Y,F];var af=0;var an=Z.match(V)||[];var aj={};for(var ae=0,aq=an.length;ae=5&&"lang-"===ap.substring(0,5);if(am&&!(ai&&typeof ai[1]==="string")){am=false;ap=J}if(!am){aj[ag]=ap}}var ab=af;af+=ag.length;if(!am){ad.push(Y+ab,ap)}else{var al=ai[1];var ak=ag.indexOf(al);var ac=ak+al.length;if(ai[2]){ac=ag.length-ai[2].length;ak=ac-al.length}var ar=ap.substring(5);B(Y+ab,ag.substring(0,ak),W,ad);B(Y+ab+ak,al,q(ar,al),ad);B(Y+ab+ac,ag.substring(ac),W,ad)}}ah.decorations=ad};return W}function i(T){var W=[],S=[];if(T.tripleQuotedStrings){W.push([C,/^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,null,"'\""])}else{if(T.multiLineStrings){W.push([C,/^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,null,"'\"`"])}else{W.push([C,/^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,null,"\"'"])}}if(T.verbatimStrings){S.push([C,/^@\"(?:[^\"]|\"\")*(?:\"|$)/,null])}var Y=T.hashComments;if(Y){if(T.cStyleComments){if(Y>1){W.push([j,/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,null,"#"])}else{W.push([j,/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,null,"#"])}S.push([C,/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,null])}else{W.push([j,/^#[^\r\n]*/,null,"#"])}}if(T.cStyleComments){S.push([j,/^\/\/[^\r\n]*/,null]);S.push([j,/^\/\*[\s\S]*?(?:\*\/|$)/,null])}if(T.regexLiterals){var X=("/(?=[^/*])(?:[^/\\x5B\\x5C]|\\x5C[\\s\\S]|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+/");S.push(["lang-regex",new RegExp("^"+M+"("+X+")")])}var V=T.types;if(V){S.push([O,V])}var U=(""+T.keywords).replace(/^ | $/g,"");if(U.length){S.push([z,new RegExp("^(?:"+U.replace(/[\s,]+/g,"|")+")\\b"),null])}W.push([F,/^\s+/,null," \r\n\t\xA0"]);S.push([G,/^@[a-z_$][a-z_$@0-9]*/i,null],[O,/^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/,null],[F,/^[a-z_$][a-z_$@0-9]*/i,null],[G,new RegExp("^(?:0x[a-f0-9]+|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)(?:e[+\\-]?\\d+)?)[a-z]*","i"),null,"0123456789"],[F,/^\\[\s\S]?/,null],[L,/^.[^\s\w\.$@\'\"\`\/\#\\]*/,null]);return g(W,S)}var K=i({keywords:A,hashComments:true,cStyleComments:true,multiLineStrings:true,regexLiterals:true});function Q(V,ag){var U=/(?:^|\s)nocode(?:\s|$)/;var ab=/\r\n?|\n/;var ac=V.ownerDocument;var S;if(V.currentStyle){S=V.currentStyle.whiteSpace}else{if(window.getComputedStyle){S=ac.defaultView.getComputedStyle(V,null).getPropertyValue("white-space")}}var Z=S&&"pre"===S.substring(0,3);var af=ac.createElement("LI");while(V.firstChild){af.appendChild(V.firstChild)}var W=[af];function ae(al){switch(al.nodeType){case 1:if(U.test(al.className)){break}if("BR"===al.nodeName){ad(al);if(al.parentNode){al.parentNode.removeChild(al)}}else{for(var an=al.firstChild;an;an=an.nextSibling){ae(an)}}break;case 3:case 4:if(Z){var am=al.nodeValue;var aj=am.match(ab);if(aj){var ai=am.substring(0,aj.index);al.nodeValue=ai;var ah=am.substring(aj.index+aj[0].length);if(ah){var ak=al.parentNode;ak.insertBefore(ac.createTextNode(ah),al.nextSibling)}ad(al);if(!ai){al.parentNode.removeChild(al)}}}break}}function ad(ak){while(!ak.nextSibling){ak=ak.parentNode;if(!ak){return}}function ai(al,ar){var aq=ar?al.cloneNode(false):al;var ao=al.parentNode;if(ao){var ap=ai(ao,1);var an=al.nextSibling;ap.appendChild(aq);for(var am=an;am;am=an){an=am.nextSibling;ap.appendChild(am)}}return aq}var ah=ai(ak.nextSibling,0);for(var aj;(aj=ah.parentNode)&&aj.nodeType===1;){ah=aj}W.push(ah)}for(var Y=0;Y=S){ah+=2}if(V>=ap){Z+=2}}}var t={};function c(U,V){for(var S=V.length;--S>=0;){var T=V[S];if(!t.hasOwnProperty(T)){t[T]=U}else{if(window.console){console.warn("cannot override language handler %s",T)}}}}function q(T,S){if(!(T&&t.hasOwnProperty(T))){T=/^\s*]*(?:>|$)/],[j,/^<\!--[\s\S]*?(?:-\->|$)/],["lang-",/^<\?([\s\S]+?)(?:\?>|$)/],["lang-",/^<%([\s\S]+?)(?:%>|$)/],[L,/^(?:<[%?]|[%?]>)/],["lang-",/^]*>([\s\S]+?)<\/xmp\b[^>]*>/i],["lang-js",/^]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-css",/^]*>([\s\S]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),["default-markup","htm","html","mxml","xhtml","xml","xsl"]);c(g([[F,/^[\s]+/,null," \t\r\n"],[n,/^(?:\"[^\"]*\"?|\'[^\']*\'?)/,null,"\"'"]],[[m,/^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],[P,/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],[L,/^[=<>\/]+/],["lang-js",/^on\w+\s*=\s*\"([^\"]+)\"/i],["lang-js",/^on\w+\s*=\s*\'([^\']+)\'/i],["lang-js",/^on\w+\s*=\s*([^\"\'>\s]+)/i],["lang-css",/^style\s*=\s*\"([^\"]+)\"/i],["lang-css",/^style\s*=\s*\'([^\']+)\'/i],["lang-css",/^style\s*=\s*([^\"\'>\s]+)/i]]),["in.tag"]);c(g([],[[n,/^[\s\S]+/]]),["uq.val"]);c(i({keywords:l,hashComments:true,cStyleComments:true,types:e}),["c","cc","cpp","cxx","cyc","m"]);c(i({keywords:"null,true,false"}),["json"]);c(i({keywords:R,hashComments:true,cStyleComments:true,verbatimStrings:true,types:e}),["cs"]);c(i({keywords:x,cStyleComments:true}),["java"]);c(i({keywords:H,hashComments:true,multiLineStrings:true}),["bsh","csh","sh"]);c(i({keywords:I,hashComments:true,multiLineStrings:true,tripleQuotedStrings:true}),["cv","py"]);c(i({keywords:s,hashComments:true,multiLineStrings:true,regexLiterals:true}),["perl","pl","pm"]);c(i({keywords:f,hashComments:true,multiLineStrings:true,regexLiterals:true}),["rb"]);c(i({keywords:w,cStyleComments:true,regexLiterals:true}),["js"]);c(i({keywords:r,hashComments:3,cStyleComments:true,multilineStrings:true,tripleQuotedStrings:true,regexLiterals:true}),["coffee"]);c(g([],[[C,/^[\s\S]+/]]),["regex"]);function d(V){var U=V.langExtension;try{var S=a(V.sourceNode);var T=S.sourceCode;V.sourceCode=T;V.spans=S.spans;V.basePos=0;q(U,T)(V);D(V)}catch(W){if("console" in window){console.log(W&&W.stack?W.stack:W)}}}function y(W,V,U){var S=document.createElement("PRE");S.innerHTML=W;if(U){Q(S,U)}var T={langExtension:V,numberLines:U,sourceNode:S};d(T);return S.innerHTML}function b(ad){function Y(af){return document.getElementsByTagName(af)}var ac=[Y("pre"),Y("code"),Y("xmp")];var T=[];for(var aa=0;aa=0){var ah=ai.match(ab);var am;if(!ah&&(am=o(aj))&&"CODE"===am.tagName){ah=am.className.match(ab)}if(ah){ah=ah[1]}var al=false;for(var ak=aj.parentNode;ak;ak=ak.parentNode){if((ak.tagName==="pre"||ak.tagName==="code"||ak.tagName==="xmp")&&ak.className&&ak.className.indexOf("prettyprint")>=0){al=true;break}}if(!al){var af=aj.className.match(/\blinenums\b(?::(\d+))?/);af=af?af[1]&&af[1].length?+af[1]:true:false;if(af){Q(aj,af)}S={langExtension:ah,sourceNode:aj,numberLines:af};d(S)}}}if(X]*(?:>|$)/],[PR.PR_COMMENT,/^<\!--[\s\S]*?(?:-\->|$)/],[PR.PR_PUNCTUATION,/^(?:<[%?]|[%?]>)/],["lang-",/^<\?([\s\S]+?)(?:\?>|$)/],["lang-",/^<%([\s\S]+?)(?:%>|$)/],["lang-",/^]*>([\s\S]+?)<\/xmp\b[^>]*>/i],["lang-handlebars",/^]*type\s*=\s*['"]?text\/x-handlebars-template['"]?\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-js",/^]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-css",/^]*>([\s\S]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i],[PR.PR_DECLARATION,/^{{[#^>/]?\s*[\w.][^}]*}}/],[PR.PR_DECLARATION,/^{{&?\s*[\w.][^}]*}}/],[PR.PR_DECLARATION,/^{{{>?\s*[\w.][^}]*}}}/],[PR.PR_COMMENT,/^{{![^}]*}}/]]),["handlebars","hbs"]);PR.registerLangHandler(PR.createSimpleLexer([[PR.PR_PLAIN,/^[ \t\r\n\f]+/,null," \t\r\n\f"]],[[PR.PR_STRING,/^\"(?:[^\n\r\f\\\"]|\$?:\r\n?|\n|\f)|\\[\s\S])*\"/,null],[PR.PR_STRING,/^\'(?:[^\n\r\f\\\']|\\(?:\r\n?|\n|\f)|\\[\s\S])*\'/,null],["lang-css-str",/^url\(([^$\"\']*)\)/i],[PR.PR_KEYWORD,/^(?:url|rgb|\!important|@import|@page|@media|@charset|inherit)(?=[^\-\w]|$)/i,null],["lang-css-kw",/^(-?(?:[_a-z]|(?:\\[0-9a-f]+ ?))(?:[_a-z0-9\-]|\$?:\\[0-9a-f]+ ?))*)\s*:/i],[PR.PR_COMMENT,/^\/\*[^*]*\*+(?:[^\/*][^*]*\*+)*\//],[PR.PR_COMMENT,/^(?:)/],[PR.PR_LITERAL,/^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i],[PR.PR_LITERAL,/^#(?:[0-9a-f]{3}){1,2}/i],[PR.PR_PLAIN,/^-?(?:[_a-z]|(?:\\[\da-f]+ ?))(?:[_a-z\d\-]|\\(?:\\[\da-f]+ ?))*/i],[PR.PR_PUNCTUATION,/^[^\s\w\'\"]+/]]),["css"]);PR.registerLangHandler(PR.createSimpleLexer([],[[PR.PR_KEYWORD,/^-?(?:[_a-z]|(?:\\[\da-f]+ ?))(?:[_a-z\d\-]|\\(?:\\[\da-f]+ ?))*/i]]),["css-kw"]);PR.registerLangHandler(PR.createSimpleLexer([],[[PR.PR_STRING,/^[^$\"\']+/]]),["css-str"]); 3 | -------------------------------------------------------------------------------- /coverage/lcov-report/resizeCanvas.js.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Code coverage report for resizeCanvas.js 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | 19 | 20 |

21 |

22 |

All files resizeCanvas.js

23 |

24 | 25 |

26 | 75% 27 | Statements 28 | 3/4 29 |

30 | 31 | 32 |

33 | 50% 34 | Branches 35 | 1/2 36 |

37 | 38 | 39 |

40 | 100% 41 | Functions 42 | 1/1 43 |

44 | 45 | 46 |

47 | 75% 48 | Lines 49 | 3/4 50 |

51 | 52 | 53 |

54 |

55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |

57 |

58 |

59 |


 60 | 1
 61 | 2
 62 | 3
 63 | 4
 64 | 5
 65 | 6
 66 | 7
 67 | 8
 68 | 9
 69 | 10
 70 | 11
 71 | 12
 72 | 13
 73 | 14
 74 | 15
 75 | 16
 76 | 17
 77 | 18
 78 | 19
 79 | 20
 80 | 21
 81 | 22
 82 | 23
 83 | 24
 84 | 25
 85 | 26
 86 | 27
 87 | 28
 88 | 29
 89 | 30
 90 | 31
 91 | 32
 92 | 33
 93 | 34
 94 | 35  
 95 |  
 96 |  
 97 |  
 98 |  
 99 |  
100 |  
101 |  
102 |  
103 |  
104 |  
105 |  
106 | 4x
107 |  
108 |  
109 |  
110 |  
111 |  
112 |  
113 |  
114 |  
115 | 4x
116 |  
117 |  
118 |  
119 |  
120 |  
121 |  
122 | 4x
123 |  
124 |  
125 |  
126 |  
127 |  
128 |   import { setCanvasHTMLElementDimensions } from './setCanvasHTMLElementDimensions';
129 | import { transformContextMatrix } from './transformContextMatrix';
130 | import { restoreFromHistory } from './restoreFromHistory';
131 |  
132 | function resizeCanvas({
133 |   opts,
134 |   canvasID,
135 |   canvasHTMLElement,
136 |   canvasStyleSheet,
137 |   baseContext,
138 |   history,
139 | }) {
140 |   setCanvasHTMLElementDimensions({
141 |     id: canvasID,
142 |     el: canvasHTMLElement,
143 |     autoAspectRatio: opts.autoAspectRatio,
144 |     viewBox: opts.viewBox,
145 |     resolution: opts.resolution,
146 |     styleSheet: canvasStyleSheet,
147 |   });
148 |  
149 |   transformContextMatrix({
150 |     ctx: baseContext,
151 |     viewBox: opts.viewBox,
152 |     resolution: opts.resolution,
153 |     scaleMode: opts.scaleMode,
154 |   });
155 |  
156 |   Iif (opts.static) {
157 |     restoreFromHistory(baseContext, history);
158 |   }
159 | }
160 |  
161 | export { resizeCanvas };
162 |

163 | 164 |

165 |

166 | 171 | 172 | 173 | 178 | 179 | 180 | 181 | 182 | -------------------------------------------------------------------------------- /coverage/lcov-report/restoreFromHistory.js.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Code coverage report for restoreFromHistory.js 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | 19 | 20 |

21 |

22 |

All files restoreFromHistory.js

23 |

24 | 25 |

26 | 0% 27 | Statements 28 | 0/4 29 |

30 | 31 | 32 |

33 | 0% 34 | Branches 35 | 0/2 36 |

37 | 38 | 39 |

40 | 0% 41 | Functions 42 | 0/1 43 |

44 | 45 | 46 |

47 | 0% 48 | Lines 49 | 0/4 50 |

51 | 52 | 53 |

54 |

55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |

57 |

58 |

59 |


 60 | 1
 61 | 2
 62 | 3
 63 | 4
 64 | 5
 65 | 6
 66 | 7
 67 | 8
 68 | 9
 69 | 10
 70 | 11
 71 | 12  
 72 |  
 73 |  
 74 |  
 75 |  
 76 |  
 77 |  
 78 |  
 79 |  
 80 |  
 81 |  
 82 |   function restoreFromHistory(ctx, history) {
 83 |   for (const entry of history.entries) {
 84 |     if (entry.type === 'function') {
 85 |       ctx[entry.name].apply(ctx, entry.args);
 86 |     } else {
 87 |       ctx[entry.name] = entry.args;
 88 |     }
 89 |   }
 90 | }
 91 |  
 92 | export { restoreFromHistory };
 93 |

94 | 95 |

96 |

97 | 102 | 103 | 104 | 109 | 110 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /coverage/lcov-report/setCanvasHTMLElementDimensions.js.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Code coverage report for setCanvasHTMLElementDimensions.js 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | 19 | 20 |

21 |

22 |

All files setCanvasHTMLElementDimensions.js

23 |

24 | 25 |

26 | 90% 27 | Statements 28 | 9/10 29 |

30 | 31 | 32 |

33 | 50% 34 | Branches 35 | 2/4 36 |

37 | 38 | 39 |

40 | 100% 41 | Functions 42 | 2/2 43 |

44 | 45 | 46 |

47 | 100% 48 | Lines 49 | 9/9 50 |

51 | 52 | 53 |

54 |

55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |

57 |

58 |

59 |


 60 | 1
 61 | 2
 62 | 3
 63 | 4
 64 | 5
 65 | 6
 66 | 7
 67 | 8
 68 | 9
 69 | 10
 70 | 11
 71 | 12
 72 | 13
 73 | 14
 74 | 15
 75 | 16
 76 | 17
 77 | 18
 78 | 19
 79 | 20
 80 | 21
 81 | 22
 82 | 23
 83 | 24
 84 | 25
 85 | 26
 86 | 27
 87 | 28
 88 | 29
 89 | 30
 90 | 31
 91 | 32  
 92 | 4x
 93 | 4x
 94 |  
 95 | 4x
 96 |  
 97 |  
 98 |  
 99 |  
100 |  
101 |  
102 |  
103 |  
104 |  
105 |  
106 | 4x
107 | 4x
108 |  
109 | 4x
110 |  
111 |  
112 |  
113 |  
114 |  
115 | 4x
116 |  
117 | 4x
118 | 4x
119 |  
120 |  
121 |  
122 |   function calculateHeightFromAspectRatio(el, viewBox) {
123 |   const width = el.getBoundingClientRect().width;
124 |   const aspectRatioPercentage = viewBox[3] / viewBox[2];
125 |  
126 |   return width * aspectRatioPercentage + 'px';
127 | }
128 |  
129 | function setCanvasHTMLElementDimensions({
130 |   id,
131 |   el,
132 |   autoAspectRatio,
133 |   viewBox,
134 |   resolution,
135 |   styleSheet,
136 | }) {
137 |   Eif (autoAspectRatio) {
138 |     Iif (styleSheet.rules?.length) styleSheet.deleteRule(0);
139 |  
140 |     styleSheet.insertRule(
141 |       `.${id} { height: ${calculateHeightFromAspectRatio(el, viewBox)} }`,
142 |       0
143 |     );
144 |   }
145 |  
146 |   const { width, height } = el.getBoundingClientRect();
147 |  
148 |   el.width = width * resolution;
149 |   el.height = height * resolution;
150 | }
151 |  
152 | export { setCanvasHTMLElementDimensions };
153 |

154 | 155 |

156 |

157 | 162 | 163 | 164 | 169 | 170 | 171 | 172 | 173 | -------------------------------------------------------------------------------- /coverage/lcov-report/sort-arrow-sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/georgedoescode/VBCanvas/8d1cac759cccf90b2a77ed45c70ed6ca771b0093/coverage/lcov-report/sort-arrow-sprite.png -------------------------------------------------------------------------------- /coverage/lcov-report/sorter.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | var addSorting = (function() { 3 | 'use strict'; 4 | var cols, 5 | currentSort = { 6 | index: 0, 7 | desc: false 8 | }; 9 | 10 | // returns the summary table element 11 | function getTable() { 12 | return document.querySelector('.coverage-summary'); 13 | } 14 | // returns the thead element of the summary table 15 | function getTableHeader() { 16 | return getTable().querySelector('thead tr'); 17 | } 18 | // returns the tbody element of the summary table 19 | function getTableBody() { 20 | return getTable().querySelector('tbody'); 21 | } 22 | // returns the th element for nth column 23 | function getNthColumn(n) { 24 | return getTableHeader().querySelectorAll('th')[n]; 25 | } 26 | 27 | // loads all columns 28 | function loadColumns() { 29 | var colNodes = getTableHeader().querySelectorAll('th'), 30 | colNode, 31 | cols = [], 32 | col, 33 | i; 34 | 35 | for (i = 0; i < colNodes.length; i += 1) { 36 | colNode = colNodes[i]; 37 | col = { 38 | key: colNode.getAttribute('data-col'), 39 | sortable: !colNode.getAttribute('data-nosort'), 40 | type: colNode.getAttribute('data-type') || 'string' 41 | }; 42 | cols.push(col); 43 | if (col.sortable) { 44 | col.defaultDescSort = col.type === 'number'; 45 | colNode.innerHTML = 46 | colNode.innerHTML + ''; 47 | } 48 | } 49 | return cols; 50 | } 51 | // attaches a data attribute to every tr element with an object 52 | // of data values keyed by column name 53 | function loadRowData(tableRow) { 54 | var tableCols = tableRow.querySelectorAll('td'), 55 | colNode, 56 | col, 57 | data = {}, 58 | i, 59 | val; 60 | for (i = 0; i < tableCols.length; i += 1) { 61 | colNode = tableCols[i]; 62 | col = cols[i]; 63 | val = colNode.getAttribute('data-value'); 64 | if (col.type === 'number') { 65 | val = Number(val); 66 | } 67 | data[col.key] = val; 68 | } 69 | return data; 70 | } 71 | // loads all row data 72 | function loadData() { 73 | var rows = getTableBody().querySelectorAll('tr'), 74 | i; 75 | 76 | for (i = 0; i < rows.length; i += 1) { 77 | rows[i].data = loadRowData(rows[i]); 78 | } 79 | } 80 | // sorts the table using the data for the ith column 81 | function sortByIndex(index, desc) { 82 | var key = cols[index].key, 83 | sorter = function(a, b) { 84 | a = a.data[key]; 85 | b = b.data[key]; 86 | return a < b ? -1 : a > b ? 1 : 0; 87 | }, 88 | finalSorter = sorter, 89 | tableBody = document.querySelector('.coverage-summary tbody'), 90 | rowNodes = tableBody.querySelectorAll('tr'), 91 | rows = [], 92 | i; 93 | 94 | if (desc) { 95 | finalSorter = function(a, b) { 96 | return -1 * sorter(a, b); 97 | }; 98 | } 99 | 100 | for (i = 0; i < rowNodes.length; i += 1) { 101 | rows.push(rowNodes[i]); 102 | tableBody.removeChild(rowNodes[i]); 103 | } 104 | 105 | rows.sort(finalSorter); 106 | 107 | for (i = 0; i < rows.length; i += 1) { 108 | tableBody.appendChild(rows[i]); 109 | } 110 | } 111 | // removes sort indicators for current column being sorted 112 | function removeSortIndicators() { 113 | var col = getNthColumn(currentSort.index), 114 | cls = col.className; 115 | 116 | cls = cls.replace(/ sorted$/, '').replace(/ sorted-desc$/, ''); 117 | col.className = cls; 118 | } 119 | // adds sort indicators for current column being sorted 120 | function addSortIndicators() { 121 | getNthColumn(currentSort.index).className += currentSort.desc 122 | ? ' sorted-desc' 123 | : ' sorted'; 124 | } 125 | // adds event listeners for all sorter widgets 126 | function enableUI() { 127 | var i, 128 | el, 129 | ithSorter = function ithSorter(i) { 130 | var col = cols[i]; 131 | 132 | return function() { 133 | var desc = col.defaultDescSort; 134 | 135 | if (currentSort.index === i) { 136 | desc = !currentSort.desc; 137 | } 138 | sortByIndex(i, desc); 139 | removeSortIndicators(); 140 | currentSort.index = i; 141 | currentSort.desc = desc; 142 | addSortIndicators(); 143 | }; 144 | }; 145 | for (i = 0; i < cols.length; i += 1) { 146 | if (cols[i].sortable) { 147 | // add the click event handler on the th so users 148 | // dont have to click on those tiny arrows 149 | el = getNthColumn(i).querySelector('.sorter').parentElement; 150 | if (el.addEventListener) { 151 | el.addEventListener('click', ithSorter(i)); 152 | } else { 153 | el.attachEvent('onclick', ithSorter(i)); 154 | } 155 | } 156 | } 157 | } 158 | // adds sorting functionality to the UI 159 | return function() { 160 | if (!getTable()) { 161 | return; 162 | } 163 | cols = loadColumns(); 164 | loadData(); 165 | addSortIndicators(); 166 | enableUI(); 167 | }; 168 | })(); 169 | 170 | window.addEventListener('load', addSorting); 171 | -------------------------------------------------------------------------------- /coverage/lcov-report/styles.js.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Code coverage report for styles.js 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | 19 | 20 |

21 |

22 |

All files styles.js

23 |

24 | 25 |

26 | 100% 27 | Statements 28 | 11/11 29 |

30 | 31 | 32 |

33 | 100% 34 | Branches 35 | 2/2 36 |

37 | 38 | 39 |

40 | 100% 41 | Functions 42 | 3/3 43 |

44 | 45 | 46 |

47 | 100% 48 | Lines 49 | 11/11 50 |

51 | 52 | 53 |

54 |

55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |

57 |

58 |

59 |


 60 | 1
 61 | 2
 62 | 3
 63 | 4
 64 | 5
 65 | 6
 66 | 7
 67 | 8
 68 | 9
 69 | 10
 70 | 11
 71 | 12
 72 | 13
 73 | 14
 74 | 15
 75 | 16
 76 | 17
 77 | 18
 78 | 19
 79 | 20
 80 | 21
 81 | 22
 82 | 23
 83 | 24
 84 | 25
 85 | 26
 86 | 27
 87 | 28
 88 | 29
 89 | 30
 90 | 31  
 91 | 4x
 92 |  
 93 |  
 94 |  
 95 | 1x
 96 | 1x
 97 |  
 98 | 1x
 99 |  
100 | 1x
101 |  
102 | 1x
103 |  
104 |  
105 |  
106 |  
107 |  
108 |  
109 | 4x
110 | 4x
111 |  
112 | 4x
113 |  
114 | 4x
115 |  
116 | 4x
117 |  
118 |  
119 |  
120 |   function insertAfter(newNode, referenceNode) {
121 |   referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
122 | }
123 |  
124 | function createBaseCanvasStyles() {
125 |   const baseStyleSheet = document.createElement('style');
126 |   const target = document.styleSheets[0]?.ownerNode || document.head.firstChild;
127 |  
128 |   baseStyleSheet.id = 'vb-canvas-base-styles';
129 |  
130 |   document.head.insertBefore(baseStyleSheet, target);
131 |  
132 |   baseStyleSheet.sheet.insertRule(
133 |     '.vb-canvas { width: 100%; max-width: 100%; }',
134 |     0
135 |   );
136 | }
137 |  
138 | function createCanvasStyleSheet(id) {
139 |   const canvasStyleSheet = document.createElement('style');
140 |   const target = document.getElementById('vb-canvas-base-styles');
141 |  
142 |   canvasStyleSheet.setAttribute('data-canvas-id', id);
143 |  
144 |   insertAfter(canvasStyleSheet, target);
145 |  
146 |   return canvasStyleSheet.sheet;
147 | }
148 |  
149 | export { createCanvasStyleSheet, createBaseCanvasStyles };
150 |

151 | 152 |

153 |

154 | 159 | 160 | 161 | 166 | 167 | 168 | 169 | 170 | -------------------------------------------------------------------------------- /coverage/lcov-report/transformContextMatrix.js.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Code coverage report for transformContextMatrix.js 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | 19 | 20 |

21 |

22 |

All files transformContextMatrix.js

23 |

24 | 25 |

26 | 95% 27 | Statements 28 | 19/20 29 |

30 | 31 | 32 |

33 | 50% 34 | Branches 35 | 1/2 36 |

37 | 38 | 39 |

40 | 100% 41 | Functions 42 | 3/3 43 |

44 | 45 | 46 |

47 | 95% 48 | Lines 49 | 19/20 50 |

51 | 52 | 53 |

54 |

55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |

57 |

58 |

59 |


 60 | 1
 61 | 2
 62 | 3
 63 | 4
 64 | 5
 65 | 6
 66 | 7
 67 | 8
 68 | 9
 69 | 10
 70 | 11
 71 | 12
 72 | 13
 73 | 14
 74 | 15
 75 | 16
 76 | 17
 77 | 18
 78 | 19
 79 | 20
 80 | 21
 81 | 22
 82 | 23
 83 | 24
 84 | 25
 85 | 26
 86 | 27
 87 | 28
 88 | 29
 89 | 30
 90 | 31
 91 | 32
 92 | 33
 93 | 34
 94 | 35
 95 | 36
 96 | 37
 97 | 38
 98 | 39
 99 | 40
100 | 41
101 | 42
102 | 43
103 | 44
104 | 45
105 | 46
106 | 47
107 | 48
108 | 49
109 | 50
110 | 51
111 | 52
112 | 53
113 | 54
114 | 55
115 | 56
116 | 57
117 | 58
118 | 59
119 | 60
120 | 61
121 | 62  
122 |  
123 |  
124 |  
125 |  
126 |  
127 |  
128 |  
129 |  
130 | 4x
131 | 4x
132 |  
133 |  
134 |  
135 |  
136 | 4x
137 |  
138 |  
139 |  
140 |  
141 |  
142 |  
143 |  
144 | 4x
145 | 4x
146 | 4x
147 | 4x
148 |  
149 |  
150 |  
151 | 4x
152 | 4x
153 |  
154 |  
155 |  
156 |  
157 | 4x
158 |  
159 | 4x
160 | 4x
161 |  
162 | 4x
163 |  
164 |  
165 |  
166 |  
167 |  
168 |  
169 |  
170 | 4x
171 | 4x
172 |  
173 | 4x
174 | 4x
175 |  
176 | 4x
177 |  
178 | 4x
179 |  
180 |  
181 |  
182 |   function calculateAspectRatio(
183 |   srcWidth,
184 |   srcHeight,
185 |   maxWidth,
186 |   maxHeight,
187 |   scaleMode
188 | ) {
189 |   let ratio;
190 |  
191 |   Eif (scaleMode === 'fit') {
192 |     ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
193 |   } else {
194 |     ratio = Math.max(maxWidth / srcWidth, maxHeight / srcHeight);
195 |   }
196 |  
197 |   return {
198 |     fitWidth: srcWidth * ratio,
199 |     fitHeight: srcHeight * ratio,
200 |     ratio: ratio,
201 |   };
202 | }
203 |  
204 | function clipCtx(ctx, viewBoxWidth, viewBoxHeight) {
205 |   ctx.beginPath(viewBoxWidth, viewBoxHeight);
206 |   ctx.rect(0, 0, viewBoxWidth, viewBoxHeight);
207 |   ctx.clip();
208 |   ctx.closePath();
209 | }
210 |  
211 | function transformContextMatrix({ ctx, viewBox, resolution, scaleMode }) {
212 |   const viewBoxWidth = viewBox[2];
213 |   const viewBoxHeight = viewBox[3];
214 |  
215 |   let {
216 |     width: canvasWidth,
217 |     height: canvasHeight,
218 |   } = ctx.canvas.getBoundingClientRect();
219 |  
220 |   canvasWidth *= resolution;
221 |   canvasHeight *= resolution;
222 |  
223 |   const { fitWidth, fitHeight, ratio } = calculateAspectRatio(
224 |     viewBoxWidth,
225 |     viewBoxHeight,
226 |     canvasWidth,
227 |     canvasHeight,
228 |     scaleMode
229 |   );
230 |  
231 |   const scaleX = fitWidth / viewBoxWidth;
232 |   const scaleY = fitHeight / viewBoxHeight;
233 |  
234 |   const translateX = -viewBox[0] * ratio + (canvasWidth - fitWidth) / 2;
235 |   const translateY = -viewBox[1] * ratio + (canvasHeight - fitHeight) / 2;
236 |  
237 |   ctx.setTransform(scaleX, 0, 0, scaleY, translateX, translateY);
238 |  
239 |   clipCtx(ctx, viewBoxWidth, viewBoxHeight);
240 | }
241 |  
242 | export { transformContextMatrix };
243 |

244 | 245 |

246 |

247 | 252 | 253 | 254 | 259 | 260 | 261 | 262 | 263 | -------------------------------------------------------------------------------- /coverage/lcov.info: -------------------------------------------------------------------------------- 1 | TN: 2 | SF:src/createContextHistory.js 3 | FN:1,createContextHistory 4 | FN:6,(anonymous_1) 5 | FN:9,(anonymous_2) 6 | FN:12,(anonymous_3) 7 | FN:17,(anonymous_4) 8 | FNF:5 9 | FNH:1 10 | FNDA:4,createContextHistory 11 | FNDA:0,(anonymous_1) 12 | FNDA:0,(anonymous_2) 13 | FNDA:0,(anonymous_3) 14 | FNDA:0,(anonymous_4) 15 | DA:2,4 16 | DA:3,4 17 | DA:5,4 18 | DA:7,0 19 | DA:10,0 20 | DA:13,0 21 | DA:15,0 22 | DA:18,0 23 | LF:8 24 | LH:3 25 | BRF:0 26 | BRH:0 27 | end_of_record 28 | TN: 29 | SF:src/createObservableContext.js 30 | FN:1,createObservableContext 31 | FN:3,(anonymous_1) 32 | FN:5,(anonymous_2) 33 | FN:14,(anonymous_3) 34 | FNF:4 35 | FNH:1 36 | FNDA:4,createObservableContext 37 | FNDA:0,(anonymous_1) 38 | FNDA:0,(anonymous_2) 39 | FNDA:0,(anonymous_3) 40 | DA:2,4 41 | DA:4,0 42 | DA:5,0 43 | DA:6,0 44 | DA:8,0 45 | DA:11,0 46 | DA:15,0 47 | DA:17,0 48 | DA:20,0 49 | LF:9 50 | LH:1 51 | BRDA:4,0,0,0 52 | BRDA:4,0,1,0 53 | BRF:2 54 | BRH:0 55 | end_of_record 56 | TN: 57 | SF:src/defaults.js 58 | FNF:0 59 | FNH:0 60 | LF:0 61 | LH:0 62 | BRDA:6,0,0,1 63 | BRDA:6,0,1,0 64 | BRF:2 65 | BRH:1 66 | end_of_record 67 | TN: 68 | SF:src/domUtils.js 69 | FN:1,resolveTarget 70 | FN:9,createCanvasHTMLElement 71 | FN:18,getCanvasContext 72 | FN:22,mountCanvasToDOM 73 | FN:27,randomID 74 | FNF:5 75 | FNH:5 76 | FNDA:4,resolveTarget 77 | FNDA:4,createCanvasHTMLElement 78 | FNDA:4,getCanvasContext 79 | FNDA:4,mountCanvasToDOM 80 | FNDA:4,randomID 81 | DA:2,4 82 | DA:3,1 83 | DA:5,3 84 | DA:10,4 85 | DA:12,4 86 | DA:13,4 87 | DA:15,4 88 | DA:19,4 89 | DA:23,4 90 | DA:31,4 91 | LF:10 92 | LH:10 93 | BRDA:2,0,0,1 94 | BRDA:2,0,1,3 95 | BRF:2 96 | BRH:2 97 | end_of_record 98 | TN: 99 | SF:src/index.js 100 | FN:19,createCanvas 101 | FN:33,(anonymous_1) 102 | FN:40,(anonymous_2) 103 | FNF:3 104 | FNH:2 105 | FNDA:4,createCanvas 106 | FNDA:0,(anonymous_1) 107 | FNDA:4,(anonymous_2) 108 | DA:17,1 109 | DA:20,4 110 | DA:21,4 111 | DA:23,4 112 | DA:25,4 113 | DA:27,4 114 | DA:28,4 115 | DA:30,4 116 | DA:31,4 117 | DA:34,0 118 | DA:38,4 119 | DA:40,4 120 | DA:41,4 121 | DA:50,4 122 | DA:51,4 123 | DA:53,4 124 | LF:16 125 | LH:15 126 | BRDA:55,0,0,0 127 | BRDA:55,0,1,4 128 | BRF:2 129 | BRH:1 130 | end_of_record 131 | TN: 132 | SF:src/observeElDimensions.js 133 | FN:4,observeElDimensions 134 | FN:8,(anonymous_1) 135 | FNF:2 136 | FNH:1 137 | FNDA:4,observeElDimensions 138 | FNDA:0,(anonymous_1) 139 | DA:5,4 140 | DA:7,4 141 | DA:9,0 142 | DA:13,0 143 | DA:14,0 144 | DA:16,0 145 | DA:17,0 146 | DA:22,4 147 | LF:8 148 | LH:3 149 | BRDA:13,0,0,0 150 | BRDA:13,0,1,0 151 | BRDA:13,1,0,0 152 | BRDA:13,1,1,0 153 | BRF:4 154 | BRH:0 155 | end_of_record 156 | TN: 157 | SF:src/resizeCanvas.js 158 | FN:5,resizeCanvas 159 | FNF:1 160 | FNH:1 161 | FNDA:4,resizeCanvas 162 | DA:13,4 163 | DA:22,4 164 | DA:29,4 165 | DA:30,0 166 | LF:4 167 | LH:3 168 | BRDA:29,0,0,0 169 | BRDA:29,0,1,4 170 | BRF:2 171 | BRH:1 172 | end_of_record 173 | TN: 174 | SF:src/restoreFromHistory.js 175 | FN:1,restoreFromHistory 176 | FNF:1 177 | FNH:0 178 | FNDA:0,restoreFromHistory 179 | DA:2,0 180 | DA:3,0 181 | DA:4,0 182 | DA:6,0 183 | LF:4 184 | LH:0 185 | BRDA:3,0,0,0 186 | BRDA:3,0,1,0 187 | BRF:2 188 | BRH:0 189 | end_of_record 190 | TN: 191 | SF:src/setCanvasHTMLElementDimensions.js 192 | FN:1,calculateHeightFromAspectRatio 193 | FN:8,setCanvasHTMLElementDimensions 194 | FNF:2 195 | FNH:2 196 | FNDA:4,calculateHeightFromAspectRatio 197 | FNDA:4,setCanvasHTMLElementDimensions 198 | DA:2,4 199 | DA:3,4 200 | DA:5,4 201 | DA:16,4 202 | DA:17,4 203 | DA:19,4 204 | DA:25,4 205 | DA:27,4 206 | DA:28,4 207 | LF:9 208 | LH:9 209 | BRDA:16,0,0,4 210 | BRDA:16,0,1,0 211 | BRDA:17,1,0,0 212 | BRDA:17,1,1,4 213 | BRF:4 214 | BRH:2 215 | end_of_record 216 | TN: 217 | SF:src/styles.js 218 | FN:1,insertAfter 219 | FN:5,createBaseCanvasStyles 220 | FN:19,createCanvasStyleSheet 221 | FNF:3 222 | FNH:3 223 | FNDA:4,insertAfter 224 | FNDA:1,createBaseCanvasStyles 225 | FNDA:4,createCanvasStyleSheet 226 | DA:2,4 227 | DA:6,1 228 | DA:7,1 229 | DA:9,1 230 | DA:11,1 231 | DA:13,1 232 | DA:20,4 233 | DA:21,4 234 | DA:23,4 235 | DA:25,4 236 | DA:27,4 237 | LF:11 238 | LH:11 239 | BRDA:7,0,0,1 240 | BRDA:7,0,1,1 241 | BRF:2 242 | BRH:2 243 | end_of_record 244 | TN: 245 | SF:src/transformContextMatrix.js 246 | FN:1,calculateAspectRatio 247 | FN:23,clipCtx 248 | FN:30,transformContextMatrix 249 | FNF:3 250 | FNH:3 251 | FNDA:4,calculateAspectRatio 252 | FNDA:4,clipCtx 253 | FNDA:4,transformContextMatrix 254 | DA:10,4 255 | DA:11,4 256 | DA:13,0 257 | DA:16,4 258 | DA:24,4 259 | DA:25,4 260 | DA:26,4 261 | DA:27,4 262 | DA:31,4 263 | DA:32,4 264 | DA:37,4 265 | DA:39,4 266 | DA:40,4 267 | DA:42,4 268 | DA:50,4 269 | DA:51,4 270 | DA:53,4 271 | DA:54,4 272 | DA:56,4 273 | DA:58,4 274 | LF:20 275 | LH:19 276 | BRDA:10,0,0,4 277 | BRDA:10,0,1,0 278 | BRF:2 279 | BRH:1 280 | end_of_record 281 | -------------------------------------------------------------------------------- /dist/cjs/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, '__esModule', { value: true }); 4 | 5 | var ResizeObserver = require('resize-observer-polyfill'); 6 | var lodashEs = require('lodash-es'); 7 | 8 | function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } 9 | 10 | var ResizeObserver__default = /*#__PURE__*/_interopDefaultLegacy(ResizeObserver); 11 | 12 | var DEFAULTS = { 13 | target: document.body, 14 | viewBox: [0, 0, 300, 150], 15 | autoAspectRatio: true, 16 | scaleMode: 'fit', 17 | resolution: window.devicePixelRatio || 1, 18 | static: false, 19 | id: Math.random(), 20 | }; 21 | 22 | function resolveTarget(target) { 23 | if (typeof target === 'string') { 24 | return document.querySelector(target); 25 | } else { 26 | return target; 27 | } 28 | } 29 | 30 | function createCanvasHTMLElement(id) { 31 | const el = document.createElement('canvas'); 32 | 33 | el.classList.add('vb-canvas'); 34 | el.classList.add(id); 35 | 36 | return el; 37 | } 38 | 39 | /** @param {HTMLCanvasElement} canvasHTMLElement */ 40 | function getCanvasContext(canvasHTMLElement) { 41 | return canvasHTMLElement.getContext('2d'); 42 | } 43 | 44 | /** 45 | * @param {HTMLElement} target 46 | * @param {HTMLCanvasElement} el 47 | */ 48 | function mountCanvasToDOM(target, el) { 49 | target.appendChild(el); 50 | } 51 | 52 | // https://gist.github.com/gordonbrander/2230317 53 | function randomID() { 54 | // Math.random should be unique because of its seeding algorithm. 55 | // Convert it to base 36 (numbers + letters), and grab the first 9 characters 56 | // after the decimal. 57 | return '_' + Math.random().toString(36).substr(2, 9); 58 | } 59 | 60 | function createContextHistory() { 61 | const store = new Map(); 62 | let position = 0; 63 | 64 | return { 65 | get entries() { 66 | return store.values(); 67 | }, 68 | get size() { 69 | return store.size; 70 | }, 71 | /** 72 | * @param {"function" | "set"} type 73 | * @param {string | number | symbol} name 74 | * @param {unknown} args 75 | */ 76 | push(type, name, args) { 77 | store.set(position, { type, name, args }); 78 | 79 | position++; 80 | }, 81 | clear() { 82 | store.clear(); 83 | }, 84 | }; 85 | } 86 | 87 | /** 88 | * @param {CanvasRenderingContext2D} baseContext 89 | * @param {ReturnType['push']} observe 90 | */ 91 | function createObservableContext(baseContext, observe) { 92 | return new Proxy(baseContext, { 93 | get(target, name) { 94 | if (typeof target[name] === 'function') { 95 | return function () { 96 | observe('function', name, [...arguments]); 97 | 98 | return target[name].apply(target, arguments); 99 | }; 100 | } else { 101 | return target[name]; 102 | } 103 | }, 104 | set(target, name, val) { 105 | target[name] = val; 106 | 107 | observe('set', name, val); 108 | 109 | // succesful operation ✅ 110 | return true; 111 | }, 112 | }); 113 | } 114 | 115 | function observeElDimensions(el, callback) { 116 | let { width: prevWidth, height: prevHeight } = el.getBoundingClientRect(); 117 | 118 | const resizeObserver = new ResizeObserver__default['default']( 119 | lodashEs.debounce(([entry]) => { 120 | const { width, height } = entry.target.getBoundingClientRect(); 121 | 122 | // prevent infinite resize loops if canvas CSS dimensions are not explicitely set 123 | if (~~width !== ~~prevWidth || ~~height !== ~~prevHeight) { 124 | callback(entry); 125 | 126 | prevWidth = width; 127 | prevHeight = height; 128 | } 129 | }, 500) 130 | ); 131 | 132 | resizeObserver.observe(el); 133 | } 134 | 135 | function calculateHeightFromAspectRatio(el, viewBox) { 136 | const width = el.getBoundingClientRect().width; 137 | const aspectRatioPercentage = viewBox[3] / viewBox[2]; 138 | 139 | return width * aspectRatioPercentage + 'px'; 140 | } 141 | 142 | function setCanvasHTMLElementDimensions({ 143 | id, 144 | el, 145 | autoAspectRatio, 146 | viewBox, 147 | resolution, 148 | styleSheet, 149 | }) { 150 | if (autoAspectRatio) { 151 | if (styleSheet.rules?.length) styleSheet.deleteRule(0); 152 | 153 | styleSheet.insertRule( 154 | `.${id} { height: ${calculateHeightFromAspectRatio(el, viewBox)} }`, 155 | 0 156 | ); 157 | } 158 | 159 | const { width, height } = el.getBoundingClientRect(); 160 | 161 | el.width = width * resolution; 162 | el.height = height * resolution; 163 | } 164 | 165 | function calculateAspectRatio( 166 | srcWidth, 167 | srcHeight, 168 | maxWidth, 169 | maxHeight, 170 | scaleMode 171 | ) { 172 | let ratio; 173 | 174 | if (scaleMode === 'fit') { 175 | ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight); 176 | } else { 177 | ratio = Math.max(maxWidth / srcWidth, maxHeight / srcHeight); 178 | } 179 | 180 | return { 181 | fitWidth: srcWidth * ratio, 182 | fitHeight: srcHeight * ratio, 183 | ratio: ratio, 184 | }; 185 | } 186 | 187 | function clipCtx(ctx, viewBoxWidth, viewBoxHeight) { 188 | ctx.beginPath(viewBoxWidth, viewBoxHeight); 189 | ctx.rect(0, 0, viewBoxWidth, viewBoxHeight); 190 | ctx.clip(); 191 | ctx.closePath(); 192 | } 193 | 194 | function transformContextMatrix({ ctx, viewBox, resolution, scaleMode }) { 195 | const viewBoxWidth = viewBox[2]; 196 | const viewBoxHeight = viewBox[3]; 197 | 198 | let { 199 | width: canvasWidth, 200 | height: canvasHeight, 201 | } = ctx.canvas.getBoundingClientRect(); 202 | 203 | canvasWidth *= resolution; 204 | canvasHeight *= resolution; 205 | 206 | const { fitWidth, fitHeight, ratio } = calculateAspectRatio( 207 | viewBoxWidth, 208 | viewBoxHeight, 209 | canvasWidth, 210 | canvasHeight, 211 | scaleMode 212 | ); 213 | 214 | const scaleX = fitWidth / viewBoxWidth; 215 | const scaleY = fitHeight / viewBoxHeight; 216 | 217 | const translateX = -viewBox[0] * ratio + (canvasWidth - fitWidth) / 2; 218 | const translateY = -viewBox[1] * ratio + (canvasHeight - fitHeight) / 2; 219 | 220 | ctx.setTransform(scaleX, 0, 0, scaleY, translateX, translateY); 221 | 222 | clipCtx(ctx, viewBoxWidth, viewBoxHeight); 223 | } 224 | 225 | function restoreFromHistory(ctx, history) { 226 | for (const entry of history.entries) { 227 | if (entry.type === 'function') { 228 | ctx[entry.name].apply(ctx, entry.args); 229 | } else { 230 | ctx[entry.name] = entry.args; 231 | } 232 | } 233 | } 234 | 235 | /** 236 | * @typedef ResizeCanvasOptions 237 | * @property {import(".").CreateCanvasOptions} opts 238 | * @property {string} canvasID 239 | * @property {HTMLCanvasElement} canvasHTMLElement 240 | * @property {CSSStyleSheet} canvasStyleSheet 241 | * @property {CanvasRenderingContext2D} baseContext 242 | * @property {ReturnType} history 243 | */ 244 | 245 | /** 246 | * @param {ResizeCanvasOptions} options 247 | */ 248 | function resizeCanvas({ 249 | opts, 250 | canvasID, 251 | canvasHTMLElement, 252 | canvasStyleSheet, 253 | baseContext, 254 | history, 255 | }) { 256 | setCanvasHTMLElementDimensions({ 257 | id: canvasID, 258 | el: canvasHTMLElement, 259 | autoAspectRatio: opts.autoAspectRatio, 260 | viewBox: opts.viewBox, 261 | resolution: opts.resolution, 262 | styleSheet: canvasStyleSheet, 263 | }); 264 | 265 | transformContextMatrix({ 266 | ctx: baseContext, 267 | viewBox: opts.viewBox, 268 | resolution: opts.resolution, 269 | scaleMode: opts.scaleMode, 270 | }); 271 | 272 | if (opts.static) { 273 | restoreFromHistory(baseContext, history); 274 | } 275 | } 276 | 277 | function insertAfter(newNode, referenceNode) { 278 | referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); 279 | } 280 | 281 | function createBaseCanvasStyles() { 282 | const baseStyleSheet = document.createElement('style'); 283 | const target = document.styleSheets[0]?.ownerNode || document.head.firstChild; 284 | 285 | baseStyleSheet.id = 'vb-canvas-base-styles'; 286 | 287 | document.head.insertBefore(baseStyleSheet, target); 288 | 289 | baseStyleSheet.sheet.insertRule( 290 | '.vb-canvas { width: 100%; max-width: 100%; }', 291 | 0 292 | ); 293 | } 294 | 295 | function createCanvasStyleSheet(id) { 296 | const canvasStyleSheet = document.createElement('style'); 297 | const target = document.getElementById('vb-canvas-base-styles'); 298 | 299 | canvasStyleSheet.setAttribute('data-canvas-id', id); 300 | 301 | insertAfter(canvasStyleSheet, target); 302 | 303 | return canvasStyleSheet.sheet; 304 | } 305 | 306 | createBaseCanvasStyles(); 307 | 308 | /** 309 | * @typedef CreateCanvasOptions 310 | * @property {HTMLElement} [target=document.body] Where to add the `