Skip to content

Commit 13daa61

Browse files
wassfilawassfila
committed
pan and zoom on center
1 parent 47d45f0 commit 13daa61

File tree

4 files changed

+96
-54
lines changed

4 files changed

+96
-54
lines changed

‎config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ export default
6969
"highlight":"#aaf046"
7070
}
7171
},
72-
"scale_ratio":1.04,
72+
"scale_ratio":1.08,
7373
"scale_min" :0.2,
7474
"scale_max" :5
7575
}

‎src/main.js

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,10 @@ import * as dat from "./gui_app.js";
66
import * as mouse from "./mouse_move.js";
77

88

9-
let svg_div = document.createElement('div');
10-
svg_div.setAttribute("id","svg_div");
11-
document.body.appendChild(svg_div);
12-
13-
149
let pyh_render_div = document.createElement('div');
1510
document.body.appendChild(pyh_render_div);
1611
let main_view_div = document.createElement('div');
12+
main_view_div.id = "svg_div";
1713
document.body.appendChild(main_view_div);
1814

1915
dat.init();

‎src/mouse_move.js

Lines changed: 34 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,47 @@
11
import * as utils from "./../src/utils.js";
22
import * as dat from "./gui_app.js";
33

4-
let state ={over:false};
4+
let state ={over_vertex:false,coord:{x:0,y:0},isdown:false,origin:{rx:0,ry:0}};
55

66
function init(element){
77

88
element.addEventListener( 'touchstart', onMousePan, false );
99
element.addEventListener( 'touchend', onMousePan, false );
1010
element.addEventListener( 'mousedown', onMousePan, false );
1111
element.addEventListener( 'mouseup', onMousePan, false );
12+
element.addEventListener( 'mousemove', onMousePan, false );
1213
element.addEventListener( 'mousedown', onMouseZoom, false );
1314
element.addEventListener( 'wheel', onWheel, false );
1415

1516
//onMouseVertex registred by the view_svg for every svg vertex
1617
}
1718

1819
function onMousePan(e){
19-
//console.log('Pan');
20+
if(e.target.tagName == "rect"){
21+
//TODO handle vertex move on physics
22+
}else{//svg or div
23+
let mx = e.clientX;//e.offsetX
24+
let my = e.clientY;//e.offsetY
25+
if(e.buttons == 1){
26+
if(e.type == "mousedown"){
27+
state.isdown = true;
28+
}else if(e.type == "mouseup"){
29+
state.isdown = false;
30+
}else if(e.type == "mousemove"){
31+
let dx = mx - state.coord.x;
32+
let dy = my - state.coord.y;
33+
utils.send('graph_mouse',{type:'view_move',tx:dx,ty:dy});
34+
}
35+
}
36+
if(e.target.tagName == "svg"){
37+
let svg_rect_no_scale = e.target.parentElement.getBoundingClientRect();
38+
state.origin.rx = e.offsetX / svg_rect_no_scale.width;
39+
state.origin.ry = e.offsetY / svg_rect_no_scale.height;
40+
//console.log(`rx=${state.origin.rx.toFixed(2)} , ry=${state.origin.ry.toFixed(2)} ; w=${svg_rect_scale.width.toFixed(2)} ; h=${svg_rect_scale.height.toFixed(2)}`);
41+
}
42+
state.coord.x = mx;
43+
state.coord.y = my;
44+
}
2045
e.preventDefault();
2146
e.stopPropagation();
2247
}
@@ -43,15 +68,15 @@ function onMouseVertex(e){
4368
type = 'act';
4469
start = false;
4570
}
46-
if(['mouseover','touchstart'].includes(e.type)){
71+
if(['mouseenter','touchstart'].includes(e.type)){
4772
type = 'hover';
4873
start = true;
49-
state.over = true;
74+
state.over_vertex = true;
5075
}
5176
if(['mouseleave','touchend'].includes(e.type)){
5277
type = 'hover';
5378
start = false;
54-
state.over = false;
79+
state.over_vertex = false;
5580
}
5681
utils.send('graph_mouse',{type:type,id:id,start:start});
5782
return false;
@@ -64,11 +89,13 @@ function onWheel(e){
6489
}else if (e.deltaY < 0){
6590
step = 'up';
6691
}
67-
if(state.over){
92+
if(state.over_vertex){
6893
utils.send('graph_mouse',{type:'vertex_scale',step:step});
6994
}else{
70-
utils.send('graph_mouse',{type:'view_scale',step:step});
95+
utils.send('graph_mouse',{type:'view_scale',step:step,origin:state.origin});
7196
}
97+
e.preventDefault();
98+
e.stopPropagation();
7299
}
73100

74101

‎src/view_svg.js

Lines changed: 60 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ function init(element){
2626
window.addEventListener( 'graph_edge', onViewEdge, false );
2727
window.addEventListener( 'graph', onGraph, false );
2828
window.addEventListener( 'graph_mouse', onViewMouse, false );
29+
svg_transform_init(document.getElementById('svg_graph'));
2930
console.log(`view_svg> init() in ${Date.now() - start} ms`);
3031
}
3132

@@ -72,55 +73,73 @@ function init(element){
7273
}
7374

7475
function onViewMouse(e){
76+
let svg = document.getElementById('svg_graph');
7577
if(e.detail.type == "view_scale"){
76-
console.log(`view_svg> ${e.detail.step}`);
77-
svg_scale(document.getElementById('svg_graph'),e.detail.step);
78+
//svg_move(svg,0,0);
79+
svg_scale(svg,e.detail.step,e.detail.origin);
80+
}else if(e.detail.type == "view_move"){
81+
svg_shift(svg,e.detail.tx,e.detail.ty);
7882
}
7983
}
8084
//---- SVG Utils ----
81-
function svg_get_scale(element){
82-
let sx = 1;
83-
let sy = 1;
84-
let scale_exist = false;
85-
element.transform.baseVal.forEach(transform => {
86-
if(transform.type == SVGTransform.SVG_TRANSFORM_SCALE){
87-
scale_exist = true;
88-
sx = transform.matrix.a;
89-
sy = transform.matrix.d;
90-
}
91-
});
92-
return {sx:sx,sy:sy,exists:scale_exist};
85+
//important to call so that translate comes before the scale
86+
function svg_transform_init(element){
87+
let svg = document.getElementById('svg_graph');
88+
svg.style.backgroundColor = "#fafafa";
89+
let tr_translate = element.createSVGTransform();
90+
tr_translate.setTranslate(0,0);
91+
element.transform.baseVal.appendItem(tr_translate);
92+
93+
let tr_scale = element.createSVGTransform();
94+
tr_scale.setScale(1,1);
95+
element.transform.baseVal.appendItem(tr_scale);
96+
97+
element.style.transformOrigin = "0% 0%";
9398
}
9499

95-
function svg_scale(element,step){
96-
let scale_exist = false;
97-
element.transform.baseVal.forEach(transform => {
98-
if(transform.type == SVGTransform.SVG_TRANSFORM_SCALE){
99-
scale_exist = true;
100-
let sx = transform.matrix.a;
101-
if(step == 'up'){
102-
let new_scale = sx / config.system.view.scale_ratio;
103-
if (new_scale > config.system.view.scale_min){
104-
transform.setScale(new_scale,new_scale);
105-
}
106-
}else{
107-
let new_scale = sx * config.system.view.scale_ratio;
108-
if (new_scale < config.system.view.scale_max){
109-
transform.setScale(new_scale,new_scale);
110-
}
111-
}
112-
}
113-
});
114-
if(!scale_exist){
115-
let transform = element.createSVGTransform();
100+
function svg_scale(element,step,origin){
101+
let rect_prev = element.getBoundingClientRect();
102+
let transform = element.transform.baseVal[1];
103+
let tochange = false;
104+
let new_scale;
105+
if(transform.type == SVGTransform.SVG_TRANSFORM_SCALE){
106+
let sx = transform.matrix.a;
116107
if(step == 'up'){
117-
let new_scale = 1 / config.system.view.scale_ratio;
118-
transform.setScale(new_scale,new_scale);
108+
new_scale = sx / config.system.view.scale_ratio;
109+
if (new_scale > config.system.view.scale_min){
110+
tochange = true;
111+
}
119112
}else{
120-
let new_scale = config.system.view.scale_ratio;
121-
transform.setScale(new_scale,new_scale);
113+
new_scale = sx * config.system.view.scale_ratio;
114+
if (new_scale < config.system.view.scale_max){
115+
tochange = true;
116+
}
122117
}
123-
element.transform.baseVal.appendItem(transform);
118+
}
119+
if(tochange){
120+
transform.setScale(new_scale,new_scale);
121+
let rect = element.getBoundingClientRect();
122+
let dx = origin.rx * (rect.width - rect_prev.width);
123+
let dy = origin.ry * (rect.height - rect_prev.height);
124+
svg_shift(element,-dx,-dy);
125+
}
126+
//console.log(`after scale w = ${rect.width} ; h = ${rect.height}`);
127+
}
128+
129+
function svg_move(element,px,py){
130+
let transform = element.transform.baseVal[0];
131+
if(transform.type == SVGTransform.SVG_TRANSFORM_TRANSLATE){
132+
transform.setTranslate(px,py);
133+
}
134+
}
135+
136+
function svg_shift(element,tx,ty){
137+
console.log(`tx = ${tx} ; ty = ${ty}`);
138+
let transform = element.transform.baseVal[0];
139+
if(transform.type == SVGTransform.SVG_TRANSFORM_TRANSLATE){
140+
let new_tx = transform.matrix.e + tx;
141+
let new_ty = transform.matrix.f + ty;
142+
transform.setTranslate(new_tx,new_ty);
124143
}
125144
}
126145

@@ -138,7 +157,7 @@ function svg_scale(element,step){
138157
.attr({ fill: dat.params.VertexColor })
139158
.on([
140159
'mousedown', 'mouseup',
141-
'click', 'mouseover',
160+
'click', 'mouseenter',
142161
'mouseleave','contextmenu',
143162
'touchstart','touchend'], mouse.onMouseVertex);
144163
vert.center(0,0);

0 commit comments

Comments
 (0)