Overview
| Comment: | removed superfulous code and comments. updated TODOs |
|---|---|
| Timelines: | family | ancestors | descendants | both | trunk |
| Files: | files | file ages | folders |
| SHA1: |
1bc6e97248650e3b7913011f74d36314 |
| User & Date: | Derek on 2012-12-23 19:18:39.592 |
| Other Links: | manifest | tags |
Context
|
2012-12-24
| ||
| 03:52 | moved globals to beginning of draw.html added some null checking to matrix_vector_lib.js fixed small bugs (zooming in to much messes up axis draw) check-in: 7c222a4184 user: Derek tags: trunk | |
|
2012-12-23
| ||
| 19:18 | removed superfulous code and comments. updated TODOs check-in: 1bc6e97248 user: Derek tags: trunk | |
| 18:51 | initial commit check-in: 257c455196 user: Derek tags: trunk | |
Changes
Modified draw.html
from [e44e8eb350]
to [d50a5e8508].
1 2 3 4 5 | <html> <script src='matrix_vector_lib.js' ></script> <script> | < < < < < < < | < < < < < < < | | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <html> <script src='matrix_vector_lib.js' ></script> <script> // TODO control with zoom rotate or pan means that action is only applied to the camera not the selected points. // TODO clicking and dragging on a line allows you to place a point somewhere on that line. Perhaps with the modifier key it would break up the existing line into line segments. // TODO when lines are deleted, readd the solo points to the solo_points list // // TODO z for undo shift + z for redo. // |
| ︙ | ︙ | |||
131 132 133 134 135 136 137 |
var button = event.button;
var keycode = button + 1000; //treat clicks like a button press but with higher keycode.
keyDown({keyCode: keycode}); } // it seems the keyCode of the original event cant be overwritten.
document.body.onmousewheel = function(event){
var delta = event.wheelDelta;
| < | 117 118 119 120 121 122 123 124 125 126 127 128 129 130 |
var button = event.button;
var keycode = button + 1000; //treat clicks like a button press but with higher keycode.
keyDown({keyCode: keycode}); } // it seems the keyCode of the original event cant be overwritten.
document.body.onmousewheel = function(event){
var delta = event.wheelDelta;
if(delta < 0)
zoom_dist /= zoom_factor;
else if(delta > 0)
zoom_dist *= zoom_factor; }
document.body.onmouseup = function(event){
|
| ︙ | ︙ | |||
185 186 187 188 189 190 191 |
changeVelocity(2, false, s, lasts); }
function forwardPress(e, s, lasts){
changeVelocity(2, true, s, lasts); }
function zoomInPress(e, s, lasts){
| < < < | < < < | | 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 |
changeVelocity(2, false, s, lasts); }
function forwardPress(e, s, lasts){
changeVelocity(2, true, s, lasts); }
function zoomInPress(e, s, lasts){
zoom_dist *= zoom_factor; }
function zoomOutPress(e, s, lasts){
zoom_dist *= zoom_factor; }
function copySelectedPoints(e, s, lasts){
if(s){
var new_selection = [];
var selection_map = {};
|
| ︙ | ︙ | |||
246 247 248 249 250 251 252 |
addKeyListener(83, backwardPress);
addKeyListener(69, upPress);
addKeyListener(81, downPress);
addKeyListener(88, function(e, s, lasts){ // x
| < < < < | < < < < < < | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 |
addKeyListener(83, backwardPress);
addKeyListener(69, upPress);
addKeyListener(81, downPress);
addKeyListener(88, function(e, s, lasts){ // x
if(s){
if(highlight_object !== null && highlight_object > 0){ // delete highlighted object
if(highlight_object < point_projections.length){ // point
points[highlight_object] = null; }
else if(highlight_object < point_projections.length + line_midpoint_projections.length){ // line
lines[highlight_object - point_projections.length] = null; }
else throw "highlight object index to large"; }
else if(selected_points.length){ // delete selected points
for(var i = 0; i < selected_points.length; ++i){
points[selected_points[i]] = null; }
selected_points.length = 0; }
cleanupDeletedPoints();
highlight_object = null;
selected_points.length = 0; }});
// select point
addKeyListener(1000, function(e, s, lasts){
if(s){
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) 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;
addLine(pt, highlight_object); }
selected_points.length = 0; }}
// select points inside selection rectangle
else if(mouse_loc && last_mouse_down){
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]);
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){
if(selected_point_map[i]) continue; // already selected.
var pt = point_projections[i];
if(!pt) continue;
var _x = pt[0];
var _y = pt[1];
if(minx < _x && _x < maxx
&& miny < _y && _y < maxy){
selected_points.push(i); }}}
}});
// to prevent camera from rotating beyond straight vertical
|
| ︙ | ︙ | |||
370 371 372 373 374 375 376 | var max_angle_delta = Math.PI / 2; var delta_horizontal_angle = 0; var delta_vertical_angle = 0; var delta_position = [0,0,0]; | < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < | 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 |
var max_angle_delta = Math.PI / 2;
var delta_horizontal_angle = 0;
var delta_vertical_angle = 0;
var delta_position = [0,0,0];
var points = []; //global
var solo_points = {};
var lines = [];
var point_projections = [];
|
| ︙ | ︙ | |||
570 571 572 573 574 575 576 |
return index; }
function addLine(pt0, pt1){
delete solo_points[pt0];
delete solo_points[pt1];
lines.push([pt0, pt1]);
| | < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < | 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 |
return index; }
function addLine(pt0, pt1){
delete solo_points[pt0];
delete solo_points[pt1];
lines.push([pt0, pt1]);
return lines.length - 1; }
function draw(canvas){
var ctx = canvas.getContext('2d');
var w = canvas.width;
var h = canvas.height;
|
| ︙ | ︙ | |||
674 675 676 677 678 679 680 |
for(var k in solo_points){
var pt = point_projections[k];
if(pt) ctx.fillRect(pt[0] - 2, pt[1] - 2, 4, 4); }
| < | 560 561 562 563 564 565 566 567 568 569 570 571 572 573 |
for(var k in solo_points){
var pt = point_projections[k];
if(pt) ctx.fillRect(pt[0] - 2, pt[1] - 2, 4, 4); }
ctx.fillStyle = "rgba(250, 0, 0, 0.9)";
ctx.fillRect(w/2 - 2, h/2 - 2, 4, 4);
for(var i = 0; i < selected_points.length; ++i){
var pt;
if(selected_points[i] == -1)
|
| ︙ | ︙ | |||
753 754 755 756 757 758 759 |
}
ctx.fillStyle = "rgb(0,0,0)";
ctx.fillText(msg, 5, 20); }
| < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < | 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 |
}
ctx.fillStyle = "rgb(0,0,0)";
ctx.fillText(msg, 5, 20); }
window.onload = function(){
// load localStorage saved state.
if(localStorage.points && localStorage.lines){
points = JSON.parse(localStorage.points);
lines = JSON.parse(localStorage.lines); }
canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.width = window.innerWidth - 20;
canvas.height = window.innerHeight - 20;
window.onresize = function(){
canvas.width = window.innerWidth - 20;
canvas.height = window.innerHeight - 20; }
function getRotationAngle(x, size, max, center_size){
if(!center_size) center_size = 0.25; // the proportional size of the area in which no rotation is effected by the mouse movement
if(!max) max = Math.PI/128;
x -= size/2;
|
| ︙ | ︙ | |||
900 901 902 903 904 905 906 |
var _y = y - last_mouse_down[1];
var dist2 = _x*_x + _y*_y;
if(dist2 > MIN_DRAG_DIST * MIN_DRAG_DIST){
mouse_dragging = true; }}
| < < | < < | < < < < < < < < < | 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 |
var _y = y - last_mouse_down[1];
var dist2 = _x*_x + _y*_y;
if(dist2 > MIN_DRAG_DIST * MIN_DRAG_DIST){
mouse_dragging = true; }}
delta_horizontal_angle = getRotationAngle(x, w, max_angle_delta/frame_rate, no_rotate_area);
delta_vertical_angle = -getRotationAngle(y, h, max_angle_delta/frame_rate, no_rotate_area);
var min_point_dist2 = LINE_HIGHLIGHT_DIST * LINE_HIGHLIGHT_DIST;
highlight_object = null;
var _x = canvas.width/2 - x;
|
| ︙ | ︙ | |||
972 973 974 975 976 977 978 |
// ctx.fillRect(0, 0, canvas.width, canvas.height);
//
function animateLoop(){
| < | < < < | 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 |
// 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); }
if(delta_horizontal_angle) rotateHorizontal(delta_horizontal_angle);
if(delta_vertical_angle) rotateVertical(delta_vertical_angle);
// overwrite point projections
// TODO this may not be perfect if points are deleted etc.
point_projections.length = 0;
|
| ︙ | ︙ |