Skip to content

Commit

Permalink
fixed size and position calculation for absolute positioned elements
Browse files Browse the repository at this point in the history
  • Loading branch information
@lexoyo
lexoyo committed Oct 12, 2012
1 parent 09dc89d commit e54ac88
Show file tree
Hide file tree
Showing 4 changed files with 86 additions and 35 deletions.
31 changes: 18 additions & 13 deletions src/brix/component/interaction/Draggable.hx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -265,9 +265,9 @@ class Draggable extends DisplayObject, implements IGroupable
}
}

//trace("initPhantomStyle "+computedStyle.position+" - "+phantom.style.position);
phantom.className = phantomClassName;
miniPhantom.className = phantomClassName;
trace("initPhantomStyle "+phantom.className+" - "+phantom.style.display+" - "+dropZonesClassName);

phantom.style.width = refHtmlDom.clientWidth + "px";
phantom.style.height = refHtmlDom.clientHeight + "px";
Expand Down Expand Up @@ -381,7 +381,7 @@ class Draggable extends DisplayObject, implements IGroupable
* look for closest drop zone if there are some
*/
public function move(e:MouseEvent)
{trace("move");
{trace("move "+state+" - "+bestDropZone+" - "+dropZonesClassName+" - "+groupElement.className+" - "+groupElement.getElementsByClassName(dropZonesClassName).length+" - "+Lib.document.body.getElementsByClassName(dropZonesClassName).length);
if (state == dragging)
{
// find the closest postition
Expand All @@ -392,8 +392,7 @@ class Draggable extends DisplayObject, implements IGroupable
setAsBestDropZone(getBestDropZone(elementX, elementY));

// position of the dragged element under the mouse
rootElement.style.left = elementX + "px";
rootElement.style.top = elementY + "px";
DomTools.moveTo(rootElement, elementX, elementY);

// dispatch a custom event
var event : CustomEvent = cast Lib.document.createEvent("CustomEvent");
Expand Down Expand Up @@ -424,10 +423,12 @@ class Draggable extends DisplayObject, implements IGroupable

for (zone in dropZones)
{
var bbZone = DomTools.getElementBoundingBox(zone);
// if the mouse is in the zone
if ( mouseX > zone.offsetLeft && mouseX < zone.offsetLeft + zone.offsetWidth
&& mouseY > zone.offsetTop && mouseY < zone.offsetTop + zone.offsetHeight )
if ( mouseX > bbZone.x && mouseX < bbZone.x + bbZone.w
&& mouseY > bbZone.y && mouseY < bbZone.y + bbZone.h )
{
var bbElement = DomTools.getElementBoundingBox(rootElement);
var lastChildIdx:Int = 0;
var nearestDistance:Float = 999999999999;
// browse all children to see which one is after the desired zone
Expand All @@ -436,8 +437,8 @@ class Draggable extends DisplayObject, implements IGroupable
var child = zone.childNodes[childIdx];
// test the case before this child
zone.insertBefore(miniPhantom, child);
var bb = DomTools.getElementBoundingBox(miniPhantom);
var dist = computeDistance(bb, mouseX, mouseY);
var bbPhantom = DomTools.getElementBoundingBox(miniPhantom);
var dist = computeDistance(bbPhantom, bbElement);
if (dist < nearestDistance)
{
// new closest position
Expand All @@ -448,8 +449,8 @@ class Draggable extends DisplayObject, implements IGroupable

// test the case of the last child
zone.appendChild(miniPhantom);
var bb = DomTools.getElementBoundingBox(miniPhantom);
var dist = computeDistance(bb, mouseX, mouseY);
var bbPhantom = DomTools.getElementBoundingBox(miniPhantom);
var dist = computeDistance(bbPhantom, bbElement);
if (dist < nearestDistance)
{
nearestDistance = dist;
Expand All @@ -461,12 +462,16 @@ class Draggable extends DisplayObject, implements IGroupable
}
return null;
}
private function computeDistance(bb:BoundingBox,mouseX:Int, mouseY:Int) :Float
private function computeDistance(bbElement:BoundingBox,bbTarget:BoundingBox) :Float
{
/**/
var centerElementX = bbElement.x+ (bbElement.w/2.0);
var centerElementY = bbElement.y+ (bbElement.h/2.0);
var centerTargetX = bbTarget.x+ (bbTarget.w/2.0);
var centerTargetY = bbTarget.y+ (bbTarget.h/2.0);
return Math.sqrt(
Math.pow((bb.x)-mouseX, 2)
+ Math.pow((bb.y)-mouseY, 2)
Math.pow((centerElementX-centerTargetX), 2)
+ Math.pow((centerElementY-centerTargetY), 2)
);
/*
// take the size of the dragged element in to account
Expand Down
33 changes: 26 additions & 7 deletions src/brix/component/layout/Panel.hx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,10 +123,22 @@ class Panel extends LayoutBase
var margin = (rootElement.offsetWidth - rootElement.clientWidth);
var bodyMargin = (body.offsetWidth - body.clientWidth);

// init body size
bodySize = boundingBox.w;
bodySize += bodyMargin;

// substract header size, and position the body
if (header != null){
var bbHeader = DomTools.getElementBoundingBox(header);
DomTools.moveTo(body, bbHeader.w, null);
bodySize -= bbHeader.w;
}else{
DomTools.moveTo(body, 0, null);
}

// substract largins and
bodySize -= bodyMargin;
bodySize -= margin;
bodySize -= body.offsetLeft;
//bodySize -= boundingBox.x;

if (footer != null){
var footerMargin = (footer.offsetWidth - footer.clientWidth);
Expand All @@ -141,16 +153,23 @@ class Panel extends LayoutBase
var margin = (rootElement.offsetHeight - rootElement.clientHeight);
var bodyMargin = (body.offsetHeight - body.clientHeight);

// init body size
bodySize = boundingBox.h;

// substract header size, and position the body
if (header != null){
body.style.top = header.offsetHeight + "px";
var bbHeader = DomTools.getElementBoundingBox(header);
DomTools.moveTo(body, null, bbHeader.h);
bodySize -= bbHeader.h;
}else{
DomTools.moveTo(body, null, 0);
}

bodySize = boundingBox.h;
bodySize += bodyMargin;
bodySize -= bodyMargin;
bodySize -= margin;
bodySize -= body.offsetTop;
//bodySize -= boundingBox.y;
// case of a pannel which parent is not positioned in absolute, does not initiate the flow
bodySize += boundingBox.y;
//bodySize += boundingBox.y;

if (footer != null){
var footerMargin = (footer.offsetHeight - footer.clientHeight);
Expand Down
10 changes: 5 additions & 5 deletions src/brix/component/list/List.hx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,15 +201,15 @@ class List<ElementClass> extends DisplayObject
* retrieves the id of the item containing a given node
* @param the given DOM node
*/
private function getItemID(childElement:HtmlDom):Int
public function getItemIdx(childElement:HtmlDom):Int
{
if (childElement == rootElement || childElement == null)
{
throw("Error, could not find the element clicked in the list.");
}
if (childElement.nodeType != rootElement.nodeType || childElement.getAttribute(DATA_ATTR_LIST_ITEM_INDEX) == null)
{
return getItemID(childElement.parentNode);
return getItemIdx(childElement.parentNode);
}
return Std.parseInt(childElement.getAttribute(DATA_ATTR_LIST_ITEM_INDEX));
}
Expand All @@ -221,7 +221,7 @@ class List<ElementClass> extends DisplayObject
{
// retrieve the element of the list
var element = cast(e.target);
var idx = getItemID(element);
var idx = getItemIdx(element);
selectedItem = dataProvider[idx];

// dispatch a custom event
Expand All @@ -238,7 +238,7 @@ class List<ElementClass> extends DisplayObject
private function rollOver(e:Event)
{
var element:HtmlDom = cast(e.target);
var idx = getItemID(element);
var idx = getItemIdx(element);

// dispatch a custom event
var event : CustomEvent = cast Lib.document.createEvent("CustomEvent");
Expand All @@ -259,7 +259,7 @@ class List<ElementClass> extends DisplayObject
var children = rootElement.getElementsByTagName("li");
for (idx in 0...children.length)
{
var idxElem:Int = getItemID(children[idx]);
var idxElem:Int = getItemIdx(children[idx]);
if (idxElem >= 0)
{
var found = false;
Expand Down
47 changes: 37 additions & 10 deletions src/brix/util/DomTools.hx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,14 @@ class DomTools
* Call a calback later. This is useful sometimes when dealing with layout, because it needs time to be redrawn
* @param callbackFunction The callback function to be called in the next frame
*/
static public function doLater(callbackFunction:Void->Void, nFrames:Float=1)
static public function doLater(callbackFunction:Void->Void)
{
#if php
callbackFunction();
#if js
haxe.Timer.delay(callbackFunction, Math.round(200));
#elseif (flash || nme)
haxe.Timer.delay(callbackFunction, 1);
#else
haxe.Timer.delay(callbackFunction, Math.round(200*nFrames));
callbackFunction();
#end
}
/**
Expand Down Expand Up @@ -108,12 +110,13 @@ class DomTools
//&& element.tagName.toLowerCase() != "body"
//&& element.style.position != "relative" && element.style.position != "absolute" && element.style.position != "fixed"
){
var halfBorderH = (element.offsetWidth - element.clientWidth)/2.0;
var halfBorderV = (element.offsetHeight - element.clientHeight)/2.0;
//offsetWidth -= halfBorderH;
//offsetHeight -= halfBorderV;
var borderH = (element.offsetWidth - element.clientWidth)/2;
var borderV = (element.offsetHeight - element.clientHeight)/2;
offsetWidth -= borderH;
offsetHeight -= borderV;
offsetTop -= Math.round(borderV/2.0);
offsetLeft -= Math.round(borderH/2.0);

//trace("parent "+element.scrollTop);
offsetTop -= element.scrollTop;
offsetLeft -= element.scrollLeft;

Expand All @@ -130,7 +133,31 @@ class DomTools
h:Math.round(htmlDom.offsetHeight + offsetHeight)
};
}

/**
* position the given element at the given position
* apply an offest instead of an absolut position, in order to handle the case of the container being position absolute or relative
* @param htmlDom the elment to move
* @param x the position in the window global coordinate system
* @param y the position in the window global coordinate system
*/
static public function moveTo(htmlDom: HtmlDom, x:Null<Int>, y:Null<Int>)
{
// retrieve the bounding boxes
var elementBox = DomTools.getElementBoundingBox(htmlDom);

if (x != null){
// apply the offset between the 2 positions
var newPosX = htmlDom.offsetLeft + (x - elementBox.x);
// move the element to the position
htmlDom.style.left = Math.round(newPosX) + "px";
}
if (y != null){
// apply the offset between the 2 positions
var newPosY = htmlDom.offsetTop + (y - elementBox.y);
// move the element to the position
htmlDom.style.top = Math.round(newPosY) + "px";
}
}
/**
* for debug purpose
* trace the properties of an object
Expand Down

0 comments on commit e54ac88

Please sign in to comment.