r3291 committed - tooltip-callout: replaced positioning algorithm
Revision: 3291
Author: joern.zaefferer
Date: Thu Sep 24 09:12:38 2009
Log: tooltip-callout: replaced positioning algorithm
http://code.google.com/p/jquery-ui/source/detail?r=3291
Modified:
/branches/labs/tooltip-callout/index.html
=======================================
--- /branches/labs/tooltip-callout/index.html Thu Sep 24 06:08:23 2009
+++ /branches/labs/tooltip-callout/index.html Thu Sep 24 09:12:38 2009
@@ -21,51 +21,168 @@
}
</style>
<script type="text/javascript">
+
+ function getY(y1,y1u,y2,y2u){
+ var retVal, ori;
+
+ if(y2 > y1 && y2u < y1u){
+ retVal = y1 + (y2-y1) + 0.5*(y2u-y2);
+ ori = "c";
+ }else if(y2 < y1 && y2u > y1u) {
+ retVal = y1 + 0.5*(y1u - y1);
+ ori = "c";
+ }else if(y2 > y1 && y2u > y1u){
+ retVal = y1u - 0.5*(y1u - y2);
+ ori = "b";
+ }else{
+ retVal = y1 + 0.5*(y2u-y1);
+ ori = "t";
+ }
+ return ({
+ cutY : retVal,
+ orientation: ori
+ });
+ };
+
+ function getX(x1,x1r,x2,x2r){
+ var retVal, ori;
+
+ if(x2 > x1 && x2r < x1r){
+ retVal = x1 + (x2-x1) + 0.5*(x2r-x2);
+ ori = "c";
+ }else if(x2 < x1 && x2r > x1r) {
+ retVal = x1 + 0.5*(x1r - x1);
+ ori = "c";
+ }else if(x2 > x1 && x2r > x1r){
+ retVal = x1r - 0.5*(x1r - x2);
+ ori = "r";
+ }else{
+ retVal = x1 + 0.5*(x2r-x1);
+ ori = "l";
+ }
+ return ({
+ cutX : retVal,
+ orientation: ori
+ });
+ };
+
function calc(x1, y1, w1, h1, x2, y2, w2, h2, offsetX,
offsetY) {
- var currentX = x1 + 0.5 * w1;
- var currentY = y1 + 0.5 * h1;
- var targetX = x2 + 0.5 * w2;
- var targetY = y2 + 0.5 * h2;
-
- var angle = Math.atan2(targetY - currentY, targetX -
currentX);
- var alpha = Math.atan(h1/w1);
-
- var cutX = 0,
- cutY = 0,
- orientation;
-
- // on the right
- if((-1)*alpha <= angle && angle <= alpha){
- cutX = currentX + 0.5 * w1;
- cutY = currentY + Math.tan(angle) * (0.5 * w1);
- orientation = "rc";
- offsetX += offsetX / 2;
- offsetY = 0;
- } else
- // below
- if(alpha < angle && angle < (Math.PI - alpha)){
- cutY = currentY + 0.5 * h1;
- cutX = currentX - Math.tan(angle - (Math.PI / 2)) *
(0.5 * h1);
- orientation = "bc";
- offsetX = 0;
- offsetY += offsetY / 2;
- } else
- // on the left
- if((Math.PI - alpha) <= angle || angle <= (alpha -
Math.PI)){
- cutX = currentX - 0.5 * w1;
- cutY = currentY - Math.tan(angle - (Math.PI)) * (0.5 *
w1);
- orientation = "lc";
- offsetX = -offsetX;
- offsetY = 0;
- } else
- // above
- if ((alpha - Math.PI) < angle && angle < (-1)*alpha){
- cutY = currentY - 0.5 * h1;
- cutX = currentX + Math.tan(angle - (Math.PI * 1.5)) *
(0.5 * h1);
- orientation = "tc";
- offsetX = 0;
- offsetY = -offsetY;
- }
+
+ // corners
+ var cutX = 0,
+ cutY = 0,
+ orientation = "lt";
+
+ var x1r = x1 + w1;
+ var y1u = y1 + h1;
+
+ var x2r = x2 + w2;
+ var y2u = y2 + h2;
+
+ // right
+ if(x2 > x1r){
+ // below --> cornerarrow
+ if(y2 > y1u){
+ orientation = "br";
+ offsetX = 0;
+ offsetY += 4;
+ cutX = x1r - 4;
+ cutY = y1u;
+ }
+
+ // above --> cornerarrow
+ else if(y1 > y2u){
+ orientation = "tr";
+ offsetX = 0;
+ offsetY -= 26;
+ cutX = x1r - 10;
+ cutY = y1;
+ }
+
+ // right --> centerarrow
+ else{
+ offsetX += 4;
+ offsetY = 0;
+ cutX = x1r;
+ var vals = getY(y1,y1u,y2,y2u);
+ cutY = vals.cutY;
+ orientation = "r" + vals.orientation;
+ }
+ }else
+
+ // left
+ if(x1 > x2r){
+ // below --> cornerarrow
+ if(y2 > y1u){
+ if((y1 - y2u) < (x1 - x2r)){
+ orientation = "lb";
+ offsetX -= 26;
+ offsetY = 0;
+ cutX = x1;
+ cutY = y1u - 4;
+ }else{
+ orientation = "bl";
+ offsetX = 0;
+ offsetY += 4;
+ cutX = x1 + 10;
+ cutY = y1u;
+ }
+ }
+
+ // above --> cornerarrow
+ else if(y1 > y2u){
+ if((y1 - y2u) < (x1 - x2r)){
+ orientation = "lt";
+ offsetX -= 26;
+ offsetY = 0;
+ cutX = x1;
+ cutY = y1 + 10;
+ }else{
+ orientation = "tl";
+ offsetX = 0;
+ offsetY -= 26;
+ cutX = x1 + 10;
+ cutY = y1;
+ }
+ }
+
+ // left center --> centerarrow
+ else{
+ offsetX -= 26;
+ offsetY = 0;
+ cutX = x1;
+ var vals = getY(y1,y1u,y2,y2u);
+ cutY = vals.cutY;
+ orientation = "l" + vals.orientation;
+ }
+ }else
+
+ // above center
+ if(y1 > y2u && (x1 < x2r && x2 < x1r)){
+ offsetX = 0;
+ offsetY -= 26;
+ cutY = y1;
+ vals = getX(x1,x1r,x2,x2r);
+ cutX = vals.cutX;
+ orientation = "t" + vals.orientation;
+
+ }else
+
+ // below center
+ if(y1u < y2 && (x1 < x2r && x2 < x1r)){
+ offsetX = 0;
+ offsetY += 4;
+ cutY = y1u;
+ vals = getX(x1,x1r,x2,x2r);
+ cutX = vals.cutX + 10;
+ orientation = "b" + vals.orientation;
+ }else{
+ // no arrow
+ cutX = -100;
+ cutY = -100;
+ orientation = "bl";
+ }
+
return ({
x: cutX,
y: cutY,
@@ -131,4 +248,4 @@
</div>
</body>
-</html>
+</html>
Topic Participants
Jörn Zaefferer
Richard Worth
ralph.whitbeck