Check-in [29f4bb3e29]
Not logged in
Overview
Comment:started working on some changes for rotating and scaling selected points.
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA1: 29f4bb3e2989406b986b96c5365167137a19f953
User & Date: Derek on 2012-12-27 20:24:56
Other Links: manifest | tags
Context
2012-12-30
19:55
working on rotating selected points. check-in: 09450376b4 user: Derek tags: trunk
2012-12-27
20:24
started working on some changes for rotating and scaling selected points. check-in: 29f4bb3e29 user: Derek tags: trunk
2012-12-24
19:03
adjusted sizes of center and axis squares. check-in: b454ce1c79 user: Derek tags: trunk
Changes

Modified draw.html from [a746033bd0] to [a1adddf1a8].

54
55
56
57
58
59
60



61
62
63
64
65
66
67
var delta_vertical_angle = 0;
var delta_position = [0,0,0];


//  Use to rotate selected points about a vector line
var selection_rotation_axis = null;
var rotation_center = origin.slice(0);








var points = []; //global
var solo_points = {};







>
>
>







54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
var delta_vertical_angle = 0;
var delta_position = [0,0,0];


//  Use to rotate selected points about a vector line
var selection_rotation_axis = null;
var rotation_center = origin.slice(0);
var zoom_center = origin.slice(0);

var selected_points_start_loc = [];





var points = []; //global
var solo_points = {};
84
85
86
87
88
89
90
91
92


93
94
95
96
97
98
99
              "Select     Left Click\n" +
		      "Rotate     Right Click\n" +
		      "Move       wasd, qe\n" +
		      "Copy       Space\n" +
		      "Delete     x\n" +
		      "\n" +
		      "Click the red dot to create a point\n" +
			  "Drag between two points to connect them" +
	          "Spam a motion key to increase speed\n";


			  
var msg = helpmsg;


var view_transform =
    [[1, 0, 0],
     [0, 1, 0],







<
|
>
>







87
88
89
90
91
92
93

94
95
96
97
98
99
100
101
102
103
              "Select     Left Click\n" +
		      "Rotate     Right Click\n" +
		      "Move       wasd, qe\n" +
		      "Copy       Space\n" +
		      "Delete     x\n" +
		      "\n" +
		      "Click the red dot to create a point\n" +

			  "Spam a motion key to increase speed\n" +
			  "Drag between points to connect them\n";
	          
			  
var msg = helpmsg;


var view_transform =
    [[1, 0, 0],
     [0, 1, 0],
136
137
138
139
140
141
142




143
144
145
146
147
148
149
var POINT_COLOR = "rgba(0, 0, 0, 0.9)";
var LINE_COLOR = "rgba(0, 0, 0, 0.9)";
var FILL_COLOR = "rgba(0, 0, 0, 0.9)";

var LINE_WIDTH = 1;








function addKeyListener(keycode, func){
    if(!key_state[keycode]) key_state[keycode] = {};
    
    var key_obj = key_state[keycode];
    if(!key_obj.listeners) key_obj.listeners = [];







>
>
>
>







140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
var POINT_COLOR = "rgba(0, 0, 0, 0.9)";
var LINE_COLOR = "rgba(0, 0, 0, 0.9)";
var FILL_COLOR = "rgba(0, 0, 0, 0.9)";

var LINE_WIDTH = 1;


function getKeyState(code){
	if(!key_state[code]) return 0;
	return key_state[code].state; }



function addKeyListener(keycode, func){
    if(!key_state[keycode]) key_state[keycode] = {};
    
    var key_obj = key_state[keycode];
    if(!key_obj.listeners) key_obj.listeners = [];
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
        for(var i = 0; i < selected_points.length; ++i){
            selection_map[selected_points[i]] = i;
            var pt = points[selected_points[i]];
            
            var newpt = addPoint(pt);
            new_selection[i] = newpt; }
        
        //if(key_state[16] && key_state[16].state){  //shift + space copies lines as well.
        
        // copy lines as well
        for(var i = 0; i < lines.length; ++i){
           var line = lines[i];
           if(!line) continue;
           
           var pt1 = lines[i][0];







|







303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
        for(var i = 0; i < selected_points.length; ++i){
            selection_map[selected_points[i]] = i;
            var pt = points[selected_points[i]];
            
            var newpt = addPoint(pt);
            new_selection[i] = newpt; }
        
        //if(getKeyState(16)){  //shift + space copies lines as well.
        
        // copy lines as well
        for(var i = 0; i < lines.length; ++i){
           var line = lines[i];
           if(!line) continue;
           
           var pt1 = lines[i][0];
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
		if(highlight_object !== null){
			if(highlight_object == -1)
				highlight_object = addPoint(origin);  // create a new point at the origin
				
			
			var alreadySelected = false;  // only set for shift clicks
			
			if(key_state[16] && key_state[16].state){  // shift key is pressed.
			
				for(var i = 0; i < selected_points.length; ++i){
					if(selected_points[i] == highlight_object){
					   selected_points.splice(i, 1); // deselect point
					   alreadySelected = true; 
					   break; }}}
			else{
				selected_points.length = 0;}
				
			if(!alreadySelected && highlight_object < points.length) selected_points.push(highlight_object); }

		else if(!key_state[16] || !key_state[16].state)
			selected_points.length = 0; }
		
		
	else if(lasts && mouse_dragging ){  // drag actions
		
		//  connect selected points to highlight point with lines
		if(selected_points.length && (!key_state[16] || !key_state[16].state)){  //  TODO right now this really only works for drawing a single line, 
		
			if(highlight_object !== null && highlight_object < point_projections.length){
				if(highlight_object == -1) highlight_object = addPoint(origin);
				
				for(var i = 0; i < selected_points.length; ++i){
					var pt = selected_points[i];
					if(pt == highlight_object) continue;







|











|






|







370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
		if(highlight_object !== null){
			if(highlight_object == -1)
				highlight_object = addPoint(origin);  // create a new point at the origin
				
			
			var alreadySelected = false;  // only set for shift clicks
			
			if(getKeyState(16)){  // shift key is pressed.
			
				for(var i = 0; i < selected_points.length; ++i){
					if(selected_points[i] == highlight_object){
					   selected_points.splice(i, 1); // deselect point
					   alreadySelected = true; 
					   break; }}}
			else{
				selected_points.length = 0;}
				
			if(!alreadySelected && highlight_object < points.length) selected_points.push(highlight_object); }

		else if(!getKeyState(16))
			selected_points.length = 0; }
		
		
	else if(lasts && mouse_dragging ){  // drag actions
		
		//  connect selected points to highlight point with lines
		if(selected_points.length && (!getKeyState(16))){  //  TODO right now this really only works for drawing a single line, 
		
			if(highlight_object !== null && highlight_object < point_projections.length){
				if(highlight_object == -1) highlight_object = addPoint(origin);
				
				for(var i = 0; i < selected_points.length; ++i){
					var pt = selected_points[i];
					if(pt == highlight_object) continue;
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
			var maxx = Math.max(mouse_loc[0], last_mouse_down[0]);
			var miny = Math.min(mouse_loc[1], last_mouse_down[1]);
			var maxy = Math.max(mouse_loc[1], last_mouse_down[1]);
			
			
			var selected_point_map = {};             
			
			if(!key_state[16] || !key_state[16].state){
				selected_points.length = 0;
				selected_lines.length = 0; }
			else{
				for(var i = 0; i < selected_points.length; ++i){
					selected_point_map[selected_points[i]] = i; }}
			
			for(var i = 0; i < point_projections.length; ++i){







|







411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
			var maxx = Math.max(mouse_loc[0], last_mouse_down[0]);
			var miny = Math.min(mouse_loc[1], last_mouse_down[1]);
			var maxy = Math.max(mouse_loc[1], last_mouse_down[1]);
			
			
			var selected_point_map = {};             
			
			if(!getKeyState(16)){
				selected_points.length = 0;
				selected_lines.length = 0; }
			else{
				for(var i = 0; i < selected_points.length; ++i){
					selected_point_map[selected_points[i]] = i; }}
			
			for(var i = 0; i < point_projections.length; ++i){
428
429
430
431
432
433
434
435
























436
437
438
439
440
441
442
        }});


// right click
addKeyListener(1002, function(e, s, lasts){
	if(s == 0){
		delta_horizontal_angle = 0;
		delta_vertical_angle = 0; }});


























function writeMsg(canvas, msg){
	var lines = msg.split("\n");
	var ctx = canvas.getContext("2d");
	ctx.font = "9pt sans-serif"
	for(var i = 0; i < lines.length; ++i){







|
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>







436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
        }});


// right click
addKeyListener(1002, function(e, s, lasts){
	if(s == 0){
		delta_horizontal_angle = 0;
		delta_vertical_angle = 0; }
		
	else if(getKeyState(16)){  // use default as rotation center
		rotation_center = origin.slice(0); }
		
	else if(highlight_object > 0){  // use highlighted points for rotation center.
		if(highlight_object < points.length){
			rotation_center = points[highlight_object].slice(0); }
			
		else{
			var line = lines[highlight_object];
			var pointa = points[line[0]];
			var pointb = points[line[1]];
			rotation_center = vector_midpoint(pointa, pointb);
			selection_rotation_axis = vector_minus(pointa, pointb);
			if(vector_dot(selection_rotation_axis, view_transform[2]) < 0){
				vector_scale(-1, selection_rotation_axis, selection_rotation_axis); }}}  // axis should be pointing vertical, horizontal motions along the screen will dictate motion angle.
	
	else if(selected_points.length){  //find average of selected points for rotation center
		var rotation_center = [0,0,0];
	    for(var i = 0; i < selected_points.length; ++i){
			vector_add(rotation_center, selected_points[i], rotation_center); }
		var l = selected_points.length;
		rotation_center = [rotation_center[0]/l, rotation_center[1]/l, rotation_center[2]/l];
		}});


function writeMsg(canvas, msg){
	var lines = msg.split("\n");
	var ctx = canvas.getContext("2d");
	ctx.font = "9pt sans-serif"
	for(var i = 0; i < lines.length; ++i){
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
			throw "highlight object index to large"; }}
		
	else{
		document.body.style.cursor = "crosshair"; }
	
	if(mouse_dragging){
	
		if(selected_points.length && (!key_state[16] || !key_state[16].state)){  // if shift is held, we are selecting more points.
			if(mouse_loc && key_state[1000] && key_state[1000].state){
				ctx.beginPath();
				var pt = point_projections[selected_points[0]];
				if(pt){
					ctx.moveTo(mouse_loc[0], mouse_loc[1]);
					ctx.lineTo(pt[0], pt[1]); }
				ctx.stroke(); }}
				
		else if(mouse_loc && last_mouse_down){  
		
		
		    if(key_state[1000] && key_state[1000].state){     // select points inside square
				var minx = Math.min(mouse_loc[0], last_mouse_down[0]);
				var maxx = Math.max(mouse_loc[0], last_mouse_down[0]);
				var miny = Math.min(mouse_loc[1], last_mouse_down[1]);
				var maxy = Math.max(mouse_loc[1], last_mouse_down[1]);
				ctx.beginPath();
				ctx.rect(minx, miny, maxx - minx, maxy - miny);
				ctx.stroke(); }}







|
|










|







779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
			throw "highlight object index to large"; }}
		
	else{
		document.body.style.cursor = "crosshair"; }
	
	if(mouse_dragging){
	
		if(selected_points.length && !getKeyState(16)){  // if shift is held, we are selecting more points.
			if(mouse_loc && getKeyState(1000)){
				ctx.beginPath();
				var pt = point_projections[selected_points[0]];
				if(pt){
					ctx.moveTo(mouse_loc[0], mouse_loc[1]);
					ctx.lineTo(pt[0], pt[1]); }
				ctx.stroke(); }}
				
		else if(mouse_loc && last_mouse_down){  
		
		
		    if(getKeyState(1000)){     // select points inside square
				var minx = Math.min(mouse_loc[0], last_mouse_down[0]);
				var maxx = Math.max(mouse_loc[0], last_mouse_down[0]);
				var miny = Math.min(mouse_loc[1], last_mouse_down[1]);
				var maxy = Math.max(mouse_loc[1], last_mouse_down[1]);
				ctx.beginPath();
				ctx.rect(minx, miny, maxx - minx, maxy - miny);
				ctx.stroke(); }}
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
            var dist2 = _x*_x + _y*_y;
            
            if(dist2 > MIN_DRAG_DIST * MIN_DRAG_DIST){
                mouse_dragging = true; }}
                

				
	    if(key_state[1002] && key_state[1002].state && last_mouse_down){
			delta_horizontal_angle = getRotationAngle(x - last_mouse_down[0], w, max_angle_delta/frame_rate, 0);
			delta_vertical_angle = -getRotationAngle(y - last_mouse_down[1], h, max_angle_delta/frame_rate, 0); }
			
			
		var min_point_dist2 = LINE_HIGHLIGHT_DIST * LINE_HIGHLIGHT_DIST;
		highlight_object = null;
		







|







862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
            var dist2 = _x*_x + _y*_y;
            
            if(dist2 > MIN_DRAG_DIST * MIN_DRAG_DIST){
                mouse_dragging = true; }}
                

				
	    if(getKeyState(1002) && last_mouse_down){
			delta_horizontal_angle = getRotationAngle(x - last_mouse_down[0], w, max_angle_delta/frame_rate, 0);
			delta_vertical_angle = -getRotationAngle(y - last_mouse_down[1], h, max_angle_delta/frame_rate, 0); }
			
			
		var min_point_dist2 = LINE_HIGHLIGHT_DIST * LINE_HIGHLIGHT_DIST;
		highlight_object = null;
		
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
    // ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    // 
    
    
    function animateLoop(){
        
		if(selected_points.length){  // move selection if exists
			for(var i = 0; i < selected_points.length; ++i){
				var pt = points[selected_points[i]];
				vector_add(pt, delta_position, pt); }}
		
		else{
			moveCamera(delta_position, false); }
      







|







921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
    // ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    // 
    
    
    function animateLoop(){
        
		if(selected_points.length && !getKeyState(1002)){  // move selection if exists
			for(var i = 0; i < selected_points.length; ++i){
				var pt = points[selected_points[i]];
				vector_add(pt, delta_position, pt); }}
		
		else{
			moveCamera(delta_position, false); }