Skip to content

Commit d238f37

Browse files
wassfilawassfila
committed
multi touch logic
1 parent 13daa61 commit d238f37

File tree

6 files changed

+109
-68
lines changed

6 files changed

+109
-68
lines changed

‎README.md

+6-4
Original file line numberDiff line numberDiff line change
@@ -49,17 +49,19 @@ Existing Graph formats :
4949
* hover highlighting neighbors
5050
* hover highlighting neighbors edges
5151
* svg filters for drop shadow, light and displacement
52-
* mouse wheel scales vertices
53-
* mouse wheel scales text
52+
* mouse wheel on vertices scales vertices and their labels
53+
* mouse drag on background pan zoom overall view, with mouse centered zoom
5454

5555
## implementation plan
56-
* pan zoom overall view
56+
* drag nodes with mouse
57+
* mouse button variants with touch number
58+
* lighten non neighbors to ease movement of neighbors
59+
* hover highlighted siblings push each other when too close
5760
* remove border walls
5861
* initial layout using static algorithm
5962
* add vertices context menu for graph configuration
6063
* left click to fix, right click for config (touch, hold)
6164
* add edges labels
62-
* hover highlighted siblings push each other when too close
6365
* create display for groups
6466
* convert properties to colors
6567
* convert proerties to groups

‎config.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,8 @@ export default
4646
"inertia":10000
4747
},
4848
"gravity":0,
49-
"move_objects_with_mouse":true
49+
"move_objects_with_mouse":true,
50+
"walls":false
5051
},
5152
"app":{
5253
"debug_rotation":false

‎src/graph.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -138,10 +138,10 @@ function init(){
138138
//console.log(e.deltaY);
139139
let scale_step = config.system.view.scale_ratio;
140140
let scale;
141-
if(e.detail.step == 'up'){
141+
if(e.detail.step == 'down'){
142142
v.increase(scale_step);
143143
scale = scale_step;
144-
}else if (e.detail.step == 'down'){
144+
}else if (e.detail.step == 'up'){
145145
v.decrease(scale_step);
146146
scale = 1/scale_step;
147147
}

‎src/main.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ else{
2424

2525
graph.init(dat.params["show physics"]);
2626
view.init(main_view_div);
27-
physics.init(main_view_div,dat.params["show physics"],pyh_render_div);
27+
physics.init(main_view_div,pyh_render_div);
2828
stats.init(dat.params["show stats"]);
2929
mouse.init(main_view_div);
3030

‎src/mouse_move.js

+51-11
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as utils from "./../src/utils.js";
22
import * as dat from "./gui_app.js";
33

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

66
function init(element){
77

@@ -56,38 +56,78 @@ function onMouseVertex(e){
5656
//console.log(`${e.type} on ${e.target.id}`);
5757
const id = e.target.id.substr(5,e.target.id.length);
5858
let type,start;
59+
let type2 = null;
5960
if(['contextmenu', 'click'].includes(e.type)){
6061
e.preventDefault();
6162
e.stopPropagation();
6263
}
63-
if(['mousedown'].includes(e.type)){
64-
type = 'act';
65-
start = true;
64+
else if(['mousedown'].includes(e.type)){
65+
if(e.buttons == 2){
66+
type = 'act';
67+
start = true;
68+
state.acting = true;
69+
}else if(e.buttons == 1){
70+
type = 'drag';
71+
start = true;
72+
console.log("drag start");
73+
state.dragging = true;
74+
}
6675
}
67-
if(['mouseup'].includes(e.type)){
68-
type = 'act';
69-
start = false;
76+
else if(['mouseup'].includes(e.type)){
77+
if(state.dragging){
78+
type = 'drag';
79+
start = false;
80+
state.dragging = false;
81+
console.log("drag over");
82+
}
83+
if(state.acting){
84+
type = 'act';
85+
start = false;
86+
state.acting = false;
87+
}
88+
}
89+
else if(e.type == 'touchstart'){
90+
if(e.touches.length == 1){
91+
type = 'hover';
92+
start = true;
93+
state.over_vertex = true;
94+
}
95+
else if(e.touches.length == 2){
96+
type = 'act';
97+
start = true;
98+
type2 = 'hover'
99+
state.acting = true;
100+
state.over_vertex = true;
101+
}
70102
}
71-
if(['mouseenter','touchstart'].includes(e.type)){
103+
else if(e.type == 'mouseenter'){
72104
type = 'hover';
73105
start = true;
74106
state.over_vertex = true;
75107
}
76-
if(['mouseleave','touchend'].includes(e.type)){
108+
else if(['mouseleave','touchend'].includes(e.type)){
77109
type = 'hover';
78110
start = false;
79111
state.over_vertex = false;
112+
if(state.acting){
113+
type2 = 'act';
114+
start = false;
115+
state.acting = false;
116+
}
80117
}
81118
utils.send('graph_mouse',{type:type,id:id,start:start});
119+
if(type2 != null){
120+
utils.send('graph_mouse',{type:type2,id:id,start:start});
121+
}
82122
return false;
83123
}
84124

85125
function onWheel(e){
86126
let step;
87127
if(e.deltaY > 0){
88-
step = 'down';
89-
}else if (e.deltaY < 0){
90128
step = 'up';
129+
}else if (e.deltaY < 0){
130+
step = 'down';
91131
}
92132
if(state.over_vertex){
93133
utils.send('graph_mouse',{type:'vertex_scale',step:step});

‎src/physics_matter.js

+47-49
Original file line numberDiff line numberDiff line change
@@ -33,66 +33,66 @@ let renderer;
3333
//lineto renderer objects
3434
let canvas,context;
3535
let physics_element;
36-
let render_physics;
3736
let mouseConstraint;
3837
let forces = {
3938
neighb_start_push:150,
4039
neighb_start_attract:250,
4140
non_neighb_push:300
4241
};
4342

44-
function init(phy_el,rend_phy,render_element){
43+
function init(phy_el,render_element){
4544
physics_element = phy_el;
46-
render_physics = rend_phy;
4745
const start = Date.now();
4846
engine = Matter.Engine.create({enableSleeping:true});
4947
engine.world.gravity.y = config.system.physics.gravity;
50-
console.log(`phy> phy element width = ${physics_element.offsetWidth} ; height = ${physics_element.offsetHeight}`);
51-
console.log(`phy> rendelement width = ${render_element.offsetWidth} ; height = ${render_element.offsetHeight}`);
52-
let ground = Matter.Bodies.rectangle(0, physics_element.offsetHeight, physics_element.offsetWidth, 20, { id:"obst0" ,label:"ground",isStatic: true ,isvertex:false});
53-
let ceiling = Matter.Bodies.rectangle(0, 0, physics_element.offsetWidth*2, 20, { id:"obst1" ,label:"ceiling",isStatic: true ,isvertex:false});
54-
let wall_left = Matter.Bodies.rectangle(0, 0, 20, physics_element.offsetHeight*2, { id:"obst2" ,label:"wall_left",isStatic: true ,isvertex:false});
55-
//let wall_right = Matter.Bodies.rectangle(physics_element.offsetWidth-20, 0, physics_element.offsetHeight*2-20, physics_element.offsetHeight*2, { id:"obst3" ,label:"wall_right",isStatic: true ,isvertex:false});
56-
Matter.World.add(engine.world,[ground,ceiling,wall_left]);
48+
if(config.system.physics.walls){
49+
let brect = physics_element.getBoundingClientRect();
50+
console.log(`phy> phy element width = ${physics_element.offsetWidth} ; height = ${physics_element.offsetHeight}`);
51+
console.log(`phy> rendelement width = ${render_element.offsetWidth} ; height = ${render_element.offsetHeight}`);
52+
console.log(`phy> brect width = ${brect.width} ; height = ${brect.height}`);
53+
let ground = Matter.Bodies.rectangle(brect.width/2,brect.height-10,brect.width,20, { id:"obst0" ,label:"ground",isStatic: true ,isvertex:false});
54+
let ceiling = Matter.Bodies.rectangle(brect.width/2, 10, brect.width, 20, { id:"obst1" ,label:"ceiling",isStatic: true ,isvertex:false});
55+
let wall_left = Matter.Bodies.rectangle(10, brect.height/2, 20, brect.height, { id:"obst2" ,label:"wall_left",isStatic: true ,isvertex:false});
56+
let wall_right = Matter.Bodies.rectangle(brect.width-10, brect.height/2, 20, brect.height, { id:"obst3" ,label:"wall_right",isStatic: true ,isvertex:false});
57+
Matter.World.add(engine.world,[ground,ceiling,wall_left,wall_right]);
58+
}
5759

5860
window.addEventListener( 'resize', onResize, false );
5961
window.addEventListener( 'graph_vertex', onMatterVertex, false );
6062
window.addEventListener( 'graph_edge', onMatterEdge, false );
6163
window.addEventListener( 'graph', onGraph, false );
6264
window.addEventListener( 'engine', onEngine, false );
6365

64-
if(render_physics){
65-
if(config.system.physics.renderer.type_lineto){
66-
canvas = document.createElement('canvas');
67-
context = canvas.getContext('2d');
68-
canvas.width = physics_element.offsetWidth;
69-
canvas.height = physics_element.offsetHeight;
70-
render_element.appendChild(canvas);
71-
}
72-
if(dat.params["show physics"]){
73-
renderer = Matter.Render.create({
74-
element: render_element,
75-
engine: engine,
76-
options: {
77-
width: render_element.offsetWidth,
78-
height: render_element.offsetHeight,
79-
showAngleIndicator: false,
80-
showVelocity: true,
81-
showBounds: true,
82-
showBroadphase: true,
83-
showAxes: true,
84-
showIds: true,
85-
showCollisions: true,
86-
showSleeping:true,
87-
showDebug:false,
88-
wireframes: true,
89-
constraintIterations:config.system.physics.simulation.constraintIterations
90-
//constraintIterations default = 2
91-
//positionIterations default = 6
92-
//velocityIterations default = 4
93-
}
94-
});
95-
}
66+
if(config.system.physics.renderer.type_lineto){
67+
canvas = document.createElement('canvas');
68+
context = canvas.getContext('2d');
69+
canvas.width = physics_element.offsetWidth;
70+
canvas.height = physics_element.offsetHeight;
71+
render_element.appendChild(canvas);
72+
}
73+
if(dat.params["show physics"]){
74+
renderer = Matter.Render.create({
75+
element: render_element,
76+
engine: engine,
77+
options: {
78+
width: render_element.offsetWidth,
79+
height: render_element.offsetHeight,
80+
showAngleIndicator: false,
81+
showVelocity: true,
82+
showBounds: true,
83+
showBroadphase: true,
84+
showAxes: true,
85+
showIds: true,
86+
showCollisions: true,
87+
showSleeping:true,
88+
showDebug:false,
89+
wireframes: true,
90+
constraintIterations:config.system.physics.simulation.constraintIterations
91+
//constraintIterations default = 2
92+
//positionIterations default = 6
93+
//velocityIterations default = 4
94+
}
95+
});
9696
}
9797
canvas = render_element.getElementsByTagName("canvas")[0]
9898
//add_mouse_interaction();
@@ -264,13 +264,11 @@ function run(){
264264
if(any_vertex_to_move){
265265
utils.send('graph_edge',{type:'refresh_all'});
266266
}
267-
if(render_physics){
268-
if(config.system.physics.renderer.type_lineto){
269-
render_lineto(engine,context);
270-
}
271-
if(dat.params["show physics"]){
272-
Matter.Render.world(renderer);
273-
}
267+
if(config.system.physics.renderer.type_lineto){
268+
render_lineto(engine,context);
269+
}
270+
if(dat.params["show physics"]){
271+
Matter.Render.world(renderer);
274272
}
275273
}
276274

0 commit comments

Comments
 (0)