Skip to content

Commit e08381c

Browse files
wassfilawassfila
committed
added demo with panzoom of svg
1 parent 6753efe commit e08381c

File tree

9 files changed

+815
-11
lines changed

9 files changed

+815
-11
lines changed

‎README.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@ https://websvg.github.io/grid/
1414
* reload the page to get new random size shapes
1515
* change the window size to let the elements responsively reorganise
1616
* shitKey+mouse wheel : scale shapes up and down together with the grid, keeping responsive reorganisation
17+
* altKey+mouse wheel : zoom SVG element through [panzoom](https://github.com/anvaka/panzoom) library
18+
* ctrl+mouse wheel : default browser behavior for page zoom, not recommended to be used here as elements go out of the visible area on the sides where they cannot be reached by mouse wheel
19+
* mouse wheel : usual page vertical scroll
1720

1821
# Web docs
1922
## CSS Style Sheet Constructors
@@ -33,11 +36,8 @@ https://websvg.github.io/grid/
3336
* automate the build process
3437
* use a budler if needed but minimize balck magic lock in and rely rather on tested standards
3538

36-
# Versions
37-
## 1.1.0
39+
# Features
40+
* SVG panzoom integration for each grid element
3841
* enabled unlimited grid slots usage by one entry not only 1 or 2
3942
* added element `resize()`
40-
41-
# Features plan
42-
* conditional colors not default
43-
* optional wheel disable
43+
* press 'shift' to enable wheel grid zoom

‎index.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,14 @@
33
<meta charset="UTF-8">
44
<meta name="viewport" content="width=device-width, initial-scale=1.0">
55
<title>Smart Css Grid</title>
6+
<style>
7+
div.inside{
8+
overflow:hidden;
9+
}
10+
</style>
611
</head>
712
<body>
13+
<script src='./lib/panzoom.min.js'></script>
814
<script src="./src/demo.js" type="module"></script>
915
</body>
1016
</html>

‎lib/panzoom.min.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/web-js-utils-2.0.2.js renamed to ‎lib/web-js-utils.js

File renamed without changes.

‎media/tiger.svg

Lines changed: 726 additions & 0 deletions
Loading

‎package-lock.json

Lines changed: 34 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
},
2222
"homepage": "https://github.com/WebDocUI/grid#readme",
2323
"dependencies": {
24+
"panzoom": "^9.2.5",
2425
"web-js-utils": "^2.0.2"
2526
}
2627
}

‎src/demo.js

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
11
import {Grid} from "./index.js"
2-
import {html} from "./web-js-utils-2.0.2.js"
2+
import {html} from "../lib/web-js-utils.js"
3+
4+
async function add_svg(parent,file,props){
5+
console.log(`fetching file '${file}'`);
6+
const response = await fetch(file);
7+
const svg_text = await response.text();
8+
parent.insertAdjacentHTML("beforeend",svg_text);
9+
let elements = parent.getElementsByTagName("svg");
10+
let res_svg = elements[elements.length-1];
11+
const bb = res_svg.getBBox()
12+
res_svg.setAttribute("viewBox",`${bb.x} ${bb.y} ${bb.width} ${bb.height}`)
13+
return res_svg;
14+
}
315

416
function get_custom_div_props(){
517
return {
@@ -14,9 +26,26 @@ function get_custom_div_props(){
1426

1527
function main(){
1628
let grid = new Grid(document.body,150)
29+
let d1
1730
for(let i=0;i<20;i++){
18-
let div = grid.get_div(get_custom_div_props());
31+
let props = get_custom_div_props()
32+
let div = grid.get_div(props);
1933
console.log(`created comp : ${div.id}`);
34+
div.classList.add("inside")
35+
let mysvg = add_svg(div,"media/tiger.svg",props)
36+
.then((res)=>{
37+
let div_pz = panzoom(res, {
38+
bounds: false,
39+
boundsPadding: 1.0,
40+
maxZoom: 3,
41+
minZoom: 0.5,
42+
beforeWheel: function(e) {
43+
// allow wheel-zoom only if altKey is down. Otherwise - ignore
44+
let shouldIgnore = !e.altKey;
45+
return shouldIgnore;
46+
}
47+
});
48+
})
2049
}
2150

2251
grid.apply()
@@ -25,6 +54,9 @@ function main(){
2554
html(document.body,/*html*/`<a>
2655
<p align="center">
2756
<p align="center">"shift+mouse wheel" : scale grid</p>
57+
<p align="center">"alt+mouse wheel" : zoom svg element</p>
58+
<p align="center">"mouse wheel" : default page vertical scroll</p>
59+
<p align="center">"ctrl+mouse wheel" : default page zoom (not recommended)</p>
2860
</p>
2961
</a>`)
3062

‎src/index.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11

2-
import {html,css,suid} from "./web-js-utils-2.0.2.js"
2+
import {html,css,suid} from "../lib/web-js-utils.js"
3+
4+
//restricting to a singleton (one instance), for easier parents retriaval
5+
let that = null
36

47
function scale_grid(parent,sheet,props){
58
const id = `div_${suid()}`;
@@ -31,7 +34,8 @@ function onWheel(e){
3134
if(!e.shiftKey){
3235
return;
3336
}
34-
const main_element = e.target.classList.contains("main")?e.target:e.target.parentElement;
37+
console.log(`wheel on ${e.target.tagName} : ${e.target.id}`)
38+
let main_element = that.main_div
3539
let scale = main_element.getAttribute("data-scale");
3640
const min_scale = 0.5;
3741
const max_scale = 2;
@@ -71,6 +75,7 @@ class Grid{
7175
this.sheet = new CSSStyleSheet()
7276
this.main_div = scale_grid(parent,this.sheet,{grid_side:grid_side,max_sides:max_sides});
7377
console.log(JSON.stringify(this.main_div))
78+
that = this
7479
}
7580

7681
get_div(props){

0 commit comments

Comments
 (0)