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

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

    54     54   var delta_vertical_angle = 0;
    55     55   var delta_position = [0,0,0];
    56     56   
    57     57   
    58     58   //  Use to rotate selected points about a vector line
    59     59   var selection_rotation_axis = null;
    60     60   var rotation_center = origin.slice(0);
           61  +var zoom_center = origin.slice(0);
           62  +
           63  +var selected_points_start_loc = [];
    61     64   
    62     65   
    63     66   
    64     67   
    65     68   
    66     69   var points = []; //global
    67     70   var solo_points = {};
................................................................................
    84     87                 "Select     Left Click\n" +
    85     88   		      "Rotate     Right Click\n" +
    86     89   		      "Move       wasd, qe\n" +
    87     90   		      "Copy       Space\n" +
    88     91   		      "Delete     x\n" +
    89     92   		      "\n" +
    90     93   		      "Click the red dot to create a point\n" +
    91         -			  "Drag between two points to connect them" +
    92         -	          "Spam a motion key to increase speed\n";
           94  +			  "Spam a motion key to increase speed\n" +
           95  +			  "Drag between points to connect them\n";
           96  +	          
    93     97   			  
    94     98   var msg = helpmsg;
    95     99   
    96    100   
    97    101   var view_transform =
    98    102       [[1, 0, 0],
    99    103        [0, 1, 0],
................................................................................
   136    140   var POINT_COLOR = "rgba(0, 0, 0, 0.9)";
   137    141   var LINE_COLOR = "rgba(0, 0, 0, 0.9)";
   138    142   var FILL_COLOR = "rgba(0, 0, 0, 0.9)";
   139    143   
   140    144   var LINE_WIDTH = 1;
   141    145   
   142    146   
          147  +function getKeyState(code){
          148  +	if(!key_state[code]) return 0;
          149  +	return key_state[code].state; }
          150  +
   143    151   
   144    152   
   145    153   function addKeyListener(keycode, func){
   146    154       if(!key_state[keycode]) key_state[keycode] = {};
   147    155       
   148    156       var key_obj = key_state[keycode];
   149    157       if(!key_obj.listeners) key_obj.listeners = [];
................................................................................
   295    303           for(var i = 0; i < selected_points.length; ++i){
   296    304               selection_map[selected_points[i]] = i;
   297    305               var pt = points[selected_points[i]];
   298    306               
   299    307               var newpt = addPoint(pt);
   300    308               new_selection[i] = newpt; }
   301    309           
   302         -        //if(key_state[16] && key_state[16].state){  //shift + space copies lines as well.
          310  +        //if(getKeyState(16)){  //shift + space copies lines as well.
   303    311           
   304    312           // copy lines as well
   305    313           for(var i = 0; i < lines.length; ++i){
   306    314              var line = lines[i];
   307    315              if(!line) continue;
   308    316              
   309    317              var pt1 = lines[i][0];
................................................................................
   362    370   		if(highlight_object !== null){
   363    371   			if(highlight_object == -1)
   364    372   				highlight_object = addPoint(origin);  // create a new point at the origin
   365    373   				
   366    374   			
   367    375   			var alreadySelected = false;  // only set for shift clicks
   368    376   			
   369         -			if(key_state[16] && key_state[16].state){  // shift key is pressed.
          377  +			if(getKeyState(16)){  // shift key is pressed.
   370    378   			
   371    379   				for(var i = 0; i < selected_points.length; ++i){
   372    380   					if(selected_points[i] == highlight_object){
   373    381   					   selected_points.splice(i, 1); // deselect point
   374    382   					   alreadySelected = true; 
   375    383   					   break; }}}
   376    384   			else{
   377    385   				selected_points.length = 0;}
   378    386   				
   379    387   			if(!alreadySelected && highlight_object < points.length) selected_points.push(highlight_object); }
   380    388   
   381         -		else if(!key_state[16] || !key_state[16].state)
          389  +		else if(!getKeyState(16))
   382    390   			selected_points.length = 0; }
   383    391   		
   384    392   		
   385    393   	else if(lasts && mouse_dragging ){  // drag actions
   386    394   		
   387    395   		//  connect selected points to highlight point with lines
   388         -		if(selected_points.length && (!key_state[16] || !key_state[16].state)){  //  TODO right now this really only works for drawing a single line, 
          396  +		if(selected_points.length && (!getKeyState(16))){  //  TODO right now this really only works for drawing a single line, 
   389    397   		
   390    398   			if(highlight_object !== null && highlight_object < point_projections.length){
   391    399   				if(highlight_object == -1) highlight_object = addPoint(origin);
   392    400   				
   393    401   				for(var i = 0; i < selected_points.length; ++i){
   394    402   					var pt = selected_points[i];
   395    403   					if(pt == highlight_object) continue;
................................................................................
   403    411   			var maxx = Math.max(mouse_loc[0], last_mouse_down[0]);
   404    412   			var miny = Math.min(mouse_loc[1], last_mouse_down[1]);
   405    413   			var maxy = Math.max(mouse_loc[1], last_mouse_down[1]);
   406    414   			
   407    415   			
   408    416   			var selected_point_map = {};             
   409    417   			
   410         -			if(!key_state[16] || !key_state[16].state){
          418  +			if(!getKeyState(16)){
   411    419   				selected_points.length = 0;
   412    420   				selected_lines.length = 0; }
   413    421   			else{
   414    422   				for(var i = 0; i < selected_points.length; ++i){
   415    423   					selected_point_map[selected_points[i]] = i; }}
   416    424   			
   417    425   			for(var i = 0; i < point_projections.length; ++i){
................................................................................
   428    436           }});
   429    437   
   430    438   
   431    439   // right click
   432    440   addKeyListener(1002, function(e, s, lasts){
   433    441   	if(s == 0){
   434    442   		delta_horizontal_angle = 0;
   435         -		delta_vertical_angle = 0; }});
          443  +		delta_vertical_angle = 0; }
          444  +		
          445  +	else if(getKeyState(16)){  // use default as rotation center
          446  +		rotation_center = origin.slice(0); }
          447  +		
          448  +	else if(highlight_object > 0){  // use highlighted points for rotation center.
          449  +		if(highlight_object < points.length){
          450  +			rotation_center = points[highlight_object].slice(0); }
          451  +			
          452  +		else{
          453  +			var line = lines[highlight_object];
          454  +			var pointa = points[line[0]];
          455  +			var pointb = points[line[1]];
          456  +			rotation_center = vector_midpoint(pointa, pointb);
          457  +			selection_rotation_axis = vector_minus(pointa, pointb);
          458  +			if(vector_dot(selection_rotation_axis, view_transform[2]) < 0){
          459  +				vector_scale(-1, selection_rotation_axis, selection_rotation_axis); }}}  // axis should be pointing vertical, horizontal motions along the screen will dictate motion angle.
          460  +	
          461  +	else if(selected_points.length){  //find average of selected points for rotation center
          462  +		var rotation_center = [0,0,0];
          463  +	    for(var i = 0; i < selected_points.length; ++i){
          464  +			vector_add(rotation_center, selected_points[i], rotation_center); }
          465  +		var l = selected_points.length;
          466  +		rotation_center = [rotation_center[0]/l, rotation_center[1]/l, rotation_center[2]/l];
          467  +		}});
   436    468   
   437    469   
   438    470   function writeMsg(canvas, msg){
   439    471   	var lines = msg.split("\n");
   440    472   	var ctx = canvas.getContext("2d");
   441    473   	ctx.font = "9pt sans-serif"
   442    474   	for(var i = 0; i < lines.length; ++i){
................................................................................
   747    779   			throw "highlight object index to large"; }}
   748    780   		
   749    781   	else{
   750    782   		document.body.style.cursor = "crosshair"; }
   751    783   	
   752    784   	if(mouse_dragging){
   753    785   	
   754         -		if(selected_points.length && (!key_state[16] || !key_state[16].state)){  // if shift is held, we are selecting more points.
   755         -			if(mouse_loc && key_state[1000] && key_state[1000].state){
          786  +		if(selected_points.length && !getKeyState(16)){  // if shift is held, we are selecting more points.
          787  +			if(mouse_loc && getKeyState(1000)){
   756    788   				ctx.beginPath();
   757    789   				var pt = point_projections[selected_points[0]];
   758    790   				if(pt){
   759    791   					ctx.moveTo(mouse_loc[0], mouse_loc[1]);
   760    792   					ctx.lineTo(pt[0], pt[1]); }
   761    793   				ctx.stroke(); }}
   762    794   				
   763    795   		else if(mouse_loc && last_mouse_down){  
   764    796   		
   765    797   		
   766         -		    if(key_state[1000] && key_state[1000].state){     // select points inside square
          798  +		    if(getKeyState(1000)){     // select points inside square
   767    799   				var minx = Math.min(mouse_loc[0], last_mouse_down[0]);
   768    800   				var maxx = Math.max(mouse_loc[0], last_mouse_down[0]);
   769    801   				var miny = Math.min(mouse_loc[1], last_mouse_down[1]);
   770    802   				var maxy = Math.max(mouse_loc[1], last_mouse_down[1]);
   771    803   				ctx.beginPath();
   772    804   				ctx.rect(minx, miny, maxx - minx, maxy - miny);
   773    805   				ctx.stroke(); }}
................................................................................
   830    862               var dist2 = _x*_x + _y*_y;
   831    863               
   832    864               if(dist2 > MIN_DRAG_DIST * MIN_DRAG_DIST){
   833    865                   mouse_dragging = true; }}
   834    866                   
   835    867   
   836    868   				
   837         -	    if(key_state[1002] && key_state[1002].state && last_mouse_down){
          869  +	    if(getKeyState(1002) && last_mouse_down){
   838    870   			delta_horizontal_angle = getRotationAngle(x - last_mouse_down[0], w, max_angle_delta/frame_rate, 0);
   839    871   			delta_vertical_angle = -getRotationAngle(y - last_mouse_down[1], h, max_angle_delta/frame_rate, 0); }
   840    872   			
   841    873   			
   842    874   		var min_point_dist2 = LINE_HIGHLIGHT_DIST * LINE_HIGHLIGHT_DIST;
   843    875   		highlight_object = null;
   844    876   		
................................................................................
   889    921       // ctx.fillRect(0, 0, canvas.width, canvas.height);
   890    922       
   891    923       // 
   892    924       
   893    925       
   894    926       function animateLoop(){
   895    927           
   896         -		if(selected_points.length){  // move selection if exists
          928  +		if(selected_points.length && !getKeyState(1002)){  // move selection if exists
   897    929   			for(var i = 0; i < selected_points.length; ++i){
   898    930   				var pt = points[selected_points[i]];
   899    931   				vector_add(pt, delta_position, pt); }}
   900    932   		
   901    933   		else{
   902    934   			moveCamera(delta_position, false); }
   903    935