Cleanup and example for positioners

Interim progress on fixing up the positioners.
 - Removes margins and setting and implicit size
 - Purges the word 'layout' from the source files
 - Fixes a bug with the grid positioner, it works now
 - Cleaned up the code somewhat.

Also adds some basic examples which demonstrate that it (mostly) works.
Be warned that practically all the comments are woefully out of date.

5 files changed, 96 insertions, 0 deletions

diff --git a/examples/declarative/layouts/Button.qml b/examples/declarative/layouts/Button.qml
new file mode 100644
index 0000000..de11dc9
--- /dev/null
+++ b/examples/declarative/layouts/Button.qml
@@ -0,0 +1,20 @@
+import Qt 4.6
+Rect { border.color: "black"; color: "steelblue"; radius: 5; width: pix.width + text.width + 13; height: pix.height + 10; id: page
+    property string text
+    property string icon
+    signal clicked
+    Image { id: pix; x: 5; y:5; source: parent.icon}
+    Text { id: text; text: page.text; color: "white"; x:pix.width+pix.x+3; anchors.verticalCenter: pix.verticalCenter;}
+    MouseRegion{ id:mr; anchors.fill: parent; onClicked: {parent.focus = true; page.clicked()}}
+
+    states:
+        State{ name:"pressed"; when:mr.pressed
+            SetProperties {target:text; x: 5}
+            SetProperties {target:pix; x:text.x+text.width + 3}
+        }
+
+    transitions:
+        Transition{
+            NumberAnimation{ properties:"x,left"; easing:"easeInOutQuad"; duration:200 }
+        }
+}
diff --git a/examples/declarative/layouts/add.png b/examples/declarative/layouts/add.png
new file mode 100644
index 0000000..f29d84b
--- /dev/null
+++ b/examples/declarative/layouts/add.png
diff --git a/examples/declarative/layouts/del.png b/examples/declarative/layouts/del.png
new file mode 100644
index 0000000..1d753a3
--- /dev/null
+++ b/examples/declarative/layouts/del.png
diff --git a/examples/declarative/layouts/layouts.qml b/examples/declarative/layouts/layouts.qml
new file mode 100644
index 0000000..d049e0a
--- /dev/null
+++ b/examples/declarative/layouts/layouts.qml
@@ -0,0 +1,25 @@
+import Qt 4.6
+
+QGraphicsView{
+QGraphicsScene{
+QGraphicsWidget{
+    visible: true
+    opacity: 1
+    geometry: "0,0,400x400"
+    layout: QGraphicsLinearLayout{   
+        LayoutItem{
+            minimumSize: "100x100"
+            maximumSize: "300x300"
+            preferredSize: "100x100"
+            Rect { color: "yellow"; anchors.fill: parent }
+        }
+        LayoutItem{
+            minimumSize: "100x100"
+            maximumSize: "400x400"
+            preferredSize: "200x200"
+            Rect { color: "green"; anchors.fill: parent }
+        }
+    }
+}
+}
+}
diff --git a/examples/declarative/layouts/positioners.qml b/examples/declarative/layouts/positioners.qml
new file mode 100644
index 0000000..44f9509
--- /dev/null
+++ b/examples/declarative/layouts/positioners.qml
@@ -0,0 +1,51 @@
+import Qt 4.6
+Rect { width: 420; height: 420; id:page; color:"white"
+    VerticalPositioner { id: layout1; y:0; //width: 100; height:250;
+        move: Transition{ NumberAnimation {properties: "y"; easing: "easeOutBounce" }}
+        add: Transition{ NumberAnimation { properties: "y"; from: 500; duration:500; easing: "easeOutQuad"}}
+        remove: Transition { NumberAnimation { properties:"y"; to: 500; duration:500; easing: "easeInQuad"}}
+        Rect { color: "red"; width: 100; height: 50; border.color: "black"; radius: 15 }
+        Rect { id: blueV1; color: "lightsteelblue"; width: 100; height: 50; border.color: "black"; radius: 15 
+            //opacity: Behavior{ NumberAnimation {}}
+        }
+        Rect { color: "green"; width: 100; height: 50; border.color: "black"; radius: 15 }
+        Rect { id: blueV2; color: "lightsteelblue"; width: 100; height: 50; border.color: "black"; radius: 15 
+            //opacity: Behavior{ NumberAnimation {}}
+        }
+        Rect { color: "orange"; width: 100; height: 50; border.color: "black"; radius: 15 }
+    }
+    HorizontalPositioner { id: layout2; y:300; 
+        move: Transition{ NumberAnimation {properties: "x"; easing: "easeOutBounce" }}
+        add: Transition{ NumberAnimation {  properties: "x"; from: 500; duration:500; easing: "easeOutQuad"}
+                    NumberAnimation {  properties: "opacity"; from: 0;  duration: 500;}}
+        remove: Transition { NumberAnimation { properties: "x"; to: 500; duration:500; easing: "easeInQuad"}
+                    NumberAnimation {  properties: "opacity"; from: 1; duration: 500}}
+        Rect { color: "red"; width: 50; height: 100; border.color: "black"; radius: 15 }
+        Rect { id: blueH1; color: "lightsteelblue"; width: 50; height: 100; border.color: "black"; radius: 15 }
+        Rect { color: "green"; width: 50; height: 100; border.color: "black"; radius: 15 }
+        Rect { id: blueH2; color: "lightsteelblue"; width: 50; height: 100; border.color: "black"; radius: 15 }
+        Rect { color: "orange"; width: 50; height: 100; border.color: "black"; radius: 15 }
+    }
+    Button { text: "Remove"; icon: "del.png"; x: 135; y:90;
+        onClicked: {blueH2.opacity=0; blueH1.opacity=0; blueV1.opacity=0; blueV2.opacity=0; blueG1.opacity=0; blueG2.opacity=0; blueG3.opacity=0;}
+        }
+    Button { text: "Add"; icon: "add.png"; x: 145; y:140;
+        onClicked: {blueH2.opacity=1; blueH1.opacity=1; blueV1.opacity=1; blueV2.opacity=1; blueG1.opacity=1; blueG2.opacity=1; blueG3.opacity=1;}
+        }
+    GridPositioner { x:260; y:0; columns:3
+        remove: Transition { NumberAnimation{ properties: "opacity"; from: 1; to: 0; duration: 500}
+           NumberAnimation{properties: "x,y"; easing: "easeOutBounce"} }
+        move: Transition { NumberAnimation{ properties: "x,y"; easing: "easeOutBounce" }}
+        add: Transition { NumberAnimation{ properties: "opacity"; from: 0; to: 1; duration: 500}
+           NumberAnimation{properties: "x,y"; easing: "easeOutBounce"} }
+        Rect { color: "red"; width: 50; height: 100; border.color: "black"; radius: 15 }
+        Rect { id: blueG1; color: "lightsteelblue"; width: 50; height: 100; border.color: "black"; radius: 15 }
+        Rect { color: "green"; width: 50; height: 100; border.color: "black"; radius: 15 }
+        Rect { id: blueG2; color: "lightsteelblue"; width: 50; height: 100; border.color: "black"; radius: 15 }
+        Rect { color: "orange"; width: 50; height: 100; border.color: "black"; radius: 15 }
+        Rect { id: blueG3; color: "lightsteelblue"; width: 50; height: 100; border.color: "black"; radius: 15 }
+        Rect { color: "red"; width: 50; height: 100; border.color: "black"; radius: 15 }
+        Rect { color: "green"; width: 50; height: 100; border.color: "black"; radius: 15 }
+        Rect { color: "orange"; width: 50; height: 100; border.color: "black"; radius: 15 }
+    }
+}