Index: draw.html
==================================================================
--- draw.html
+++ draw.html
@@ -56,10 +56,13 @@
// 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 = [];
@@ -86,12 +89,13 @@
"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";
+ "Spam a motion key to increase speed\n" +
+ "Drag between points to connect them\n";
+
var msg = helpmsg;
var view_transform =
@@ -138,10 +142,14 @@
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] = {};
@@ -297,11 +305,11 @@
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.
+ //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;
@@ -364,11 +372,11 @@
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.
+ 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;
@@ -376,18 +384,18 @@
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)
+ 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 && (!key_state[16] || !key_state[16].state)){ // TODO right now this really only works for drawing a single line,
+ 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){
@@ -405,11 +413,11 @@
var maxy = Math.max(mouse_loc[1], last_mouse_down[1]);
var selected_point_map = {};
- if(!key_state[16] || !key_state[16].state){
+ 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; }}
@@ -430,11 +438,35 @@
// right click
addKeyListener(1002, function(e, s, lasts){
if(s == 0){
delta_horizontal_angle = 0;
- delta_vertical_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");
@@ -749,12 +781,12 @@
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){
+ 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]); }
@@ -761,11 +793,11 @@
ctx.stroke(); }}
else if(mouse_loc && last_mouse_down){
- if(key_state[1000] && key_state[1000].state){ // select points inside square
+ 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();
@@ -832,11 +864,11 @@
if(dist2 > MIN_DRAG_DIST * MIN_DRAG_DIST){
mouse_dragging = true; }}
- if(key_state[1002] && key_state[1002].state && last_mouse_down){
+ 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;
@@ -891,11 +923,11 @@
//
function animateLoop(){
- if(selected_points.length){ // move selection if exists
+ 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{