move.js

WEBGAME源码,有架设说明,只是非常简单

/*
$Id: move.js 10008 2007-02-21 17:59:42Z lem9 $
@author  Ivan A Kirillov ([e-mail])
*/
var dx, dy, dy2;
var cur_click;
var sm_x = 2, sm_y = 2; // update in Main()
var sm_s           = 0;
var sm_add         = 10;
var s_left         = 0;
var s_right        = 0;
var ON_relation    = 0;
var ON_grid        = 0;
var ON_display_field = 0;
var ON_angular_direct = 0;// relation_style: 0 - angular 1 - direct
var click_field    = 0;
var link_relation  = "";
var id_hint;
var canvas_width   = 0;
var canvas_height  = 0;
var osn_tab_width  = 0;
var osn_tab_height = 0;
var height_field   = 7;
var Glob_X, Glob_Y;
var timeoutID;
var layer_menu_cur_click = 0;
var step = 10;
var old_class;

//---------------------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------------------


//window.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP); 
//---CROSS
document.onmousedown = MouseDown; 
document.onmouseup   = MouseUp; 
document.onmousemove = MouseMove;

isIE = document.all && !window.opera;
isNN = !document.all && document.getElementById;
isN4 = document.layers;

if (isIE) {
  window.onscroll = General_scroll; 
  document.onselectstart = function () {return false;};
}

//document.onmouseup = function(){General_scroll_end();}
function MouseDown(e) 
{ 
  if (cur_click != null) 
  { 
    offsetx=isIE ? event.clientX + document.body.scrollLeft : e.pageX;
    offsety=isIE ? event.clientY + document.body.scrollTop : e.pageY;
    dx = offsetx - parseInt(cur_click.style.left);
    dy = offsety - parseInt(cur_click.style.top);
    //alert(" dx = " + dx + " dy = " +dy);
    document.getElementById("canvas").style.visibility = 'hidden';
    /*
    var left = parseInt(cur_click.style.left);
    var top  = parseInt(cur_click.style.top);
    dx = e.pageX - left; 
    dy = e.pageY - top;
    
    alert(" dx = " + dx + " dy = " +dy);*/
    cur_click.style.zIndex = 2;    
  }
  if(layer_menu_cur_click)
  {
    offsetx=isIE ? event.clientX + document.body.scrollLeft: e.pageX;
    dx = offsetx - parseInt(document.getElementById("layer_menu").style.width); 
  }
} 

function MouseMove(e)
{ 
  
  //Glob_X = e.pageX; 
  //Glob_Y = e.pageY;
  Glob_X = isIE ? event.clientX + document.body.scrollLeft: e.pageX; 
  Glob_Y = isIE ? event.clientY + document.body.scrollTop: e.pageY;

  // mouseX= (bw.ns4||bw.ns6)? e.pageX: bw.ie&&bw.win&&!bw.ie4? (event.clientX-2)+document.body.scrollLeft : event.clientX+document.body.scrollLeft;
  //mouseY= (bw.ns4||bw.ns6)? e.pageY: bw.ie&&bw.win&&!bw.ie4? (event.clientY-2)+document.body.scrollTop : event.clientY+document.body.scrollTop;
  
  //window.status = "X = "+ Glob_X + " Y = "+ Glob_Y;
  
  var mGx, mGy;
  if (cur_click != null) 
  {
    mGx = Glob_X - dx;
    mGy = Glob_Y - dy;
    mGx = mGx > 0 ? mGx : 0;
    mGy  = mGy > 0 ? mGy : 0;
 
    if(ON_grid)
    {
      mGx = mGx % step < step / 2 ? mGx - mGx % step : mGx - mGx % step + step;
      mGy = mGy % step < step / 2 ? mGy - mGy % step : mGy - mGy % step + step;
    }
    
    cur_click.style.left = mGx;
    cur_click.style.top  = mGy;
  }

  if (ON_relation || ON_display_field) 
  {
    document.getElementById('hint').style.left = Glob_X + 20;
    document.getElementById('hint').style.top  = Glob_Y + 20;
  }

  if(layer_menu_cur_click)
  { 
    document.getElementById("layer_menu").style.width = Glob_X - dx>=150?Glob_X - dx:150;
    //document.getElementById("layer_menu").style.height = Glob_Y - dy>=200?Glob_Y - dy:200;
    //document.getElementById("id_scroll_tab").style.height = Glob_Y - dy2;
  }
}

function MouseUp(e)
{
  if (cur_click != null) 
  {  
    document.getElementById("canvas").style.visibility = 'visible';
    Re_load(); 
    cur_click.style.zIndex = 1;
    cur_click = null; 
  }
  layer_menu_cur_click=0;
  //window.releaseEvents(Event.MOUSEMOVE); 
}
//---------------------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------------------


//function ToInt(s)
//{
 // return s.substring(0,s.length-2)*1; //re = /(\d+)\w*/; newstr = str.replace(re, "$1");
//}

function Canvas_pos()
{
  canvas_width  = document.getElementById('canvas').width  = osn_tab_width  - 3;
  canvas_height = document.getElementById('canvas').height = osn_tab_height - 3;

   if(isIE)
  { 
    document.getElementById('canvas').style.width  = (osn_tab_width  - 3)?(osn_tab_width  - 3):0;
    document.getElementById('canvas').style.height = (osn_tab_height - 3)?(osn_tab_height - 3):0;
  }
}

function Osn_tab_pos()
{
  osn_tab_width  = parseInt(document.getElementById('osn_tab').style.width);
  osn_tab_height = parseInt(document.getElementById('osn_tab').style.height);
}


function Main()
{ //alert( document.getElementById('osn_tab').offsetTop);
 //---CROSS 
  if(isIE)
  {
    document.getElementById('top_menu').style.position = 'absolute';
    document.getElementById('layer_menu').style.position = 'absolute';
  }

  document.getElementById("layer_menu").style.top = -1000; //fast scroll
  sm_x += document.getElementById('osn_tab').offsetLeft;
  sm_y += document.getElementById('osn_tab').offsetTop;
  Osn_tab_pos(); 
  Canvas_pos(); 
  Small_tab_refresh();
  Re_load();
  id_hint = document.getElementById('hint');
  if (ieIE) {
    General_scroll();
  }
}


//---------------------------------------- new -----------------------------------------
function Rezize_osn_tab()
{
  var max_X = max_Y = 0;
  for (key in j_tabs)
  { 
    k_x = parseInt(document.getElementById(key).style.left) + document.getElementById(key).offsetWidth;
    k_y = parseInt(document.getElementById(key).style.top) + document.getElementById(key).offsetHeight;
    max_X = max_X < k_x ? k_x : max_X;
    max_Y = max_Y < k_y ? k_y : max_Y;
  }
  osn_tab_width = max_X  + 50;
  osn_tab_height = max_Y + 50;
  Canvas_pos();
  document.getElementById('osn_tab').style.width = osn_tab_width;
  document.getElementById('osn_tab').style.height = osn_tab_height;
}
//--------------------------------------------------------------------------------------


function Re_load() 
{
  Rezize_osn_tab();
  var n;
  var a = new Array();
  Clear();
  for (K in contr) 
    for (key in contr[K])                 // contr name
      for (key2 in contr[K][key])         // table name
        for (key3 in contr[K][key][key2]) // field name
        { 
          if(!document.getElementById("check_vis_"+key2).checked || 
             !document.getElementById("check_vis_"+contr[K][key][key2][key3][0]).checked) continue; // if hide
          var x1_left  = document.getElementById(key2).offsetLeft+1;
          var x1_right = x1_left + document.getElementById(key2).offsetWidth;
          var x2_left  = document.getElementById(contr[K][key][key2][key3][0]).offsetLeft;
          var x2_right = x2_left + document.getElementById(contr[K][key][key2][key3][0]).offsetWidth;
          a[0] = Math.abs( x1_left - x2_left );  a[1] = Math.abs(x1_left  - x2_right);
          a[2] = Math.abs( x1_right - x2_left ); a[3] = Math.abs(x1_right - x2_right);
          n = s_left = s_right = 0;
          for(var i=1;i<4;i++)
            if(a[n]>a[i])n=i;
          if(n==1){ x1 = x1_left-sm_s;  x2 = x2_right+sm_s; if(x1<x2)n=0;}
          if(n==2){ x1 = x1_right+sm_s; x2 = x2_left-sm_s;  if(x1>x2)n=0;}
          if(n==3){ x1 = x1_right+sm_s; x2 = x2_right+sm_s; s_right = 1; }
          if(n==0){ x1 = x1_left-sm_s;  x2 = x2_left-sm_s;  s_left = 1;  }
    // alert(key2+"."+key3);
          var y1 = document.getElementById(key2).offsetTop + document.getElementById(key2+"."+key3).offsetTop + height_field;
      //    alert(1);
          var y2 = document.getElementById(contr[K][key][key2][key3][0]).offsetTop + 
                   document.getElementById(contr[K][key][key2][key3][0]+"."+contr[K][key][key2][key3][1]).offsetTop + height_field;
          Line0(x1-sm_x,y1-sm_y,x2-sm_x,y2-sm_y,"rgba(0,100,150,1)");
          
        }
}

function Line(x1,y1,x2,y2,color_line) 
{ 
  var canvas = document.getElementById("canvas");
  var ctx    = canvas.getContext("2d");
  ctx.strokeStyle = color_line;
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();  
}

function Line0(x1,y1,x2,y2,color_line)
{
  if(ON_angular_direct)
  Line2(x1,y1,x2,y2,color_line);
  else
  Line3(x1,y1,x2,y2,color_line);
}

function Line2(x1,y1,x2,y2,color_line) 
{
  var x1_ = x1;
  var x2_ = x2;
  
  Circle(x1,y1,3,3,"rgba(0,0,255,1)");
  Rect(x2-1,y2-2,4,4,"rgba(0,0,255,1)");
  
  if(s_right) 
  {
    x1_ += sm_add; x2_ += sm_add;
  }
  else if(s_left) 
  {
    x1_ -= sm_add; x2_ -= sm_add;
  }
  else
  if(x1 < x2) { x1_ += sm_add; x2_ -= sm_add; }
  else        { x1_ -= sm_add; x2_ += sm_add; }
    
  
  Line(x1,y1,x1_,y1,color_line);
  Line(x2,y2,x2_,y2,color_line);
  Line(x1_,y1,x2_,y2,color_line);
}

function Line3(x1,y1,x2,y2,color_line) 
{
  var x1_ = x1;
  var x2_ = x2;
  Circle(x1,y1,3,3,"rgba(0,0,255,1)");
  Rect(x2-1,y2-2,4,4,"rgba(0,0,255,1)");

  var x_s = (x1+x2)/2;
  if(s_right) 
  {
    if(x1 < x2) { x1_ += x2 - x1 + sm_add; x2_ += sm_add; }
    else        { x2_ += x1 - x2 + sm_add; x1_ += sm_add; }
    
    Line(x1,y1,x1_,y1,color_line);
    Line(x2,y2,x2_,y2,color_line);
    Line(x1_,y1,x2_,y2,color_line);
    return 0;
  }
  if(s_left) 
  {
    if(x1 < x2) { x2_ -= x2 - x1 + sm_add; x1_ -= sm_add; }
    else        { x1_ -= x1 - x2 + sm_add; x2_ -= sm_add; }
    
    Line(x1,y1,x1_,y1,color_line);
    Line(x2,y2,x2_,y2,color_line);
    Line(x1_,y1,x2_,y2,color_line);
    return 0;
  }
    
  Line(x1,y1,x_s,y1,color_line);
  Line(x_s,y2,x2,y2,color_line);
  Line(x_s,y1,x_s,y2,color_line);
}

function Circle(x,y,r,w,color) 
{   
  var ctx = document.getElementById('canvas').getContext('2d');   
  ctx.beginPath(); 
  ctx.moveTo(x, y);
  ctx.lineWidth = w;
  ctx.strokeStyle = color;
  ctx.arc(x, y, r, 0, 2*Math.PI, true);   
  ctx.stroke(); 
} 

function Clear() 
{
  var canvas = document.getElementById("canvas");
  var ctx    = canvas.getContext("2d");
  ctx.clearRect(0, 0, canvas_width, canvas_height);
}
  
function Rect(x1,y1,w,h,color)
{
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.fillStyle = color;
  ctx.fillRect(x1,y1,w,h);
}

//---------------------------------------------- SAVE ---------------------------------------------------
function Save(url) // (del?) no for pdf
{
  for (key in j_tabs)
  {
    document.getElementById('t_x['+key+']').value=parseInt(document.getElementById(key).style.left);
    document.getElementById('t_y['+key+']').value=parseInt(document.getElementById(key).style.top);
    document.getElementById('t_v['+key+']').value=document.getElementById('_|_tbody_'+key).style.display=='none'?0:1;
    document.getElementById('t_h['+key+']').value=document.getElementById('check_vis_'+key).checked?1:0;
  }
  document.form1.action = url; 
  document.form1.submit();
}

function Get_url_pos()
{
  var poststr = '';
  for (key in j_tabs)
  {
    poststr += '&t_x['+key+']=' + parseInt(document.getElementById(key).style.left);
    poststr += '&t_y['+key+']=' + parseInt(document.getElementById(key).style.top);
    poststr += '&t_v['+key+']=' + (document.getElementById('_|_tbody_'+key).style.display == 'none' ? 0 : 1);
    poststr += '&t_h['+key+']=' + (document.getElementById('check_vis_'+key).checked ? 1 : 0);
  }
  return poststr;
}

function Save2()
{
  var poststr = 'IS_AJAX=1&db='+db+'&token='+token+'&die_save_pos=1';
  poststr += Get_url_pos();
  makeRequest('pmd_save_pos.php', poststr);
}

function Grid()
{
  if(!ON_grid ) {
    ON_grid = 1;
    document.getElementById('grid_button').className = 'M_butt_Selected_down';//'#FFEE99';gray #AAAAAA
  
    if(isIE) { // correct for IE
      document.getElementById('grid_button').className = 'M_butt_Selected_down_IE';
    }
  }
  else  {
    document.getElementById('grid_button').className = 'M_butt';
    ON_grid = 0;  
  }
}

function Angular_direct()
{
  if(!ON_angular_direct ) {
    ON_angular_direct = 1;
    document.getElementById('angular_direct_button').className = 'M_butt_Selected_down';//'#FFEE99';gray #AAAAAA
  
    if(isIE) { // correct for IE
      document.getElementById('angular_direct_button').className = 'M_butt_Selected_down_IE';
    }
  }
  else {
    ON_angular_direct = 0;  
    document.getElementById('angular_direct_button').className = 'M_butt';
  }
  Re_load();