diff --git a/src/brix/component/interaction/Draggable.hx b/src/brix/component/interaction/Draggable.hx index dd532f5..7a67127 100644 --- a/src/brix/component/interaction/Draggable.hx +++ b/src/brix/component/interaction/Draggable.hx @@ -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"; @@ -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 @@ -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"); @@ -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 @@ -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 @@ -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; @@ -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 diff --git a/src/brix/component/layout/Panel.hx b/src/brix/component/layout/Panel.hx index 9a63e2f..715f5fa 100644 --- a/src/brix/component/layout/Panel.hx +++ b/src/brix/component/layout/Panel.hx @@ -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); @@ -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); diff --git a/src/brix/component/list/List.hx b/src/brix/component/list/List.hx index b7651c4..ad74593 100644 --- a/src/brix/component/list/List.hx +++ b/src/brix/component/list/List.hx @@ -201,7 +201,7 @@ class List 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) { @@ -209,7 +209,7 @@ class List extends DisplayObject } 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)); } @@ -221,7 +221,7 @@ class List 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 @@ -238,7 +238,7 @@ class List 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"); @@ -259,7 +259,7 @@ class List 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; diff --git a/src/brix/util/DomTools.hx b/src/brix/util/DomTools.hx index d7bef1c..f29bef3 100644 --- a/src/brix/util/DomTools.hx +++ b/src/brix/util/DomTools.hx @@ -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 } /** @@ -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; @@ -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, y:Null) + { + // 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