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: |
29f4bb3e2989406b986b96c536516713 |
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 | "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" + | < | > > | 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 | 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; } | | | 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 | 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 | | | | | 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 | 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 = {}; | | | 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 | }}); // right click addKeyListener(1002, function(e, s, lasts){ if(s == 0){ delta_horizontal_angle = 0; | | > > > > > > > > > > > > > > > > > > > > > > > > | 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 | throw "highlight object index to large"; }} else{ document.body.style.cursor = "crosshair"; } if(mouse_dragging){ | | | | | 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 | var dist2 = _x*_x + _y*_y; if(dist2 > MIN_DRAG_DIST * MIN_DRAG_DIST){ mouse_dragging = true; }} | | | 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 | // ctx.fillRect(0, 0, canvas.width, canvas.height); // function animateLoop(){ | | | 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); } |
︙ | ︙ |