Dynamic example now has more droppable Items

The example is nearly done, just needs a little more aesthetic
transfiguration. Also this commit introduces some generic components
that could be easily used to make a game like ktuberling.

10 files changed, 91 insertions, 51 deletions

diff --git a/examples/declarative/dynamic/GenericItem.qml b/examples/declarative/dynamic/GenericItem.qml
new file mode 100644
index 0000000..10e3dba
--- /dev/null
+++ b/examples/declarative/dynamic/GenericItem.qml
@@ -0,0 +1,13 @@
+import Qt 4.6
+
+Item{
+    property bool created: false
+    property string image
+    width: imageItem.width
+    height: imageItem.height
+    z: 2
+    Image{
+        id: imageItem
+        source: image; 
+    }
+}
diff --git a/examples/declarative/dynamic/PaletteItem.qml b/examples/declarative/dynamic/PaletteItem.qml
new file mode 100644
index 0000000..bb6036d
--- /dev/null
+++ b/examples/declarative/dynamic/PaletteItem.qml
@@ -0,0 +1,13 @@
+import Qt 4.6
+
+GenericItem {
+    id: itemButton
+    property string file
+    Script { source: "itemCreation.js" }
+    MouseRegion { 
+        anchors.fill: parent; 
+        onPressed: startDrag(mouse);
+        onPositionChanged: moveDrag(mouse);
+        onReleased: endDrag(mouse);
+    }
+}
diff --git a/examples/declarative/dynamic/Sun.qml b/examples/declarative/dynamic/Sun.qml
index 16d9907..a9f5d40 100644
--- a/examples/declarative/dynamic/Sun.qml
+++ b/examples/declarative/dynamic/Sun.qml
@@ -3,9 +3,11 @@ import Qt 4.6
 Image {
     id: sun
     property bool created: false
+    property string image: "images/sun.png"
     onCreatedChanged: if(created){window.activeSuns++;}else{window.activeSuns--;}
 
-    source: "images/sun.png"; 
+    source: image; 
+    z: 1
 
     //x and y get set when instantiated
     //head offscreen
diff --git a/examples/declarative/dynamic/dynamic.qml b/examples/declarative/dynamic/dynamic.qml
index aea9b0f..e6c3812 100644
--- a/examples/declarative/dynamic/dynamic.qml
+++ b/examples/declarative/dynamic/dynamic.qml
@@ -2,8 +2,8 @@ import Qt 4.6
 
 Item {
     id: window
-    //This is a desktop example
-    width: 1024; height: 480
+    //This is a desktop-sized example
+    width: 1024; height: 512
     property int activeSuns: 0
 
     // sky
@@ -33,6 +33,7 @@ Item {
         }
     }
 
+    //Day state, for when you place a sun
     states: State { name: "Day"; when: window.activeSuns > 0
         PropertyChanges { target: stopA; color: "DeepSkyBlue"}
         PropertyChanges { target: stopB; color: "SkyBlue"}
@@ -55,50 +56,48 @@ Item {
         Column{
             id: toolboxPositioner
             anchors.centerIn: parent
-            spacing: 1
-            Sun {
-                id: sunButton
-                Script { source: "sunCreation.js" }
-                MouseRegion { 
-                    anchors.fill: parent; 
-                    onPressed: startDrag(mouse);
-                    onPositionChanged: moveDrag(mouse);
-                    onReleased: endDrag(mouse);
+            spacing: 4
+            Text{ text: "Drag an item into the scene." }
+            Row{ spacing: 4; 
+                height: childrenRect.height//TODO: Put bug in JIRA when it comes back up
+                PaletteItem{ 
+                    anchors.verticalCenter: parent.verticalCenter
+                    file: "Sun.qml";
+                    image: "images/sun.png"
                 }
-            }
-            Text{ text: "Active Suns: " + activeSuns }
-            Rectangle { width: 440; height: 1; color: "black" }
-            Text{ text: "Arbitrary Javascript: " }
-            TextEdit {
-                id: jsText
-                width: 460
-                height: 80
-                readOnly: false
-                focusOnPress: true
-                
-                text: "window.activeSuns++;"
-            }
-            Rectangle {
-                width: 80
-                height: 20
-                color: "lightsteelblue"
-                Text{ anchors.centerIn: parent; text: "Execute" }
-                MouseRegion { 
-                    anchors.fill: parent; 
-                    onClicked: eval(jsText.text.toString()); 
+                PaletteItem{ 
+                    anchors.verticalCenter: parent.verticalCenter
+                    file: "GenericItem.qml"
+                    image: "images/moon.png"
+                }
+                PaletteItem{ 
+                    anchors.verticalCenter: parent.verticalCenter
+                    file: "GenericItem.qml"
+                    image: "images/tree_s.png"
+                }
+                PaletteItem{ 
+                    anchors.verticalCenter: parent.verticalCenter
+                    file: "GenericItem.qml"
+                    image: "images/rabbit_brown.png"
+                }
+                PaletteItem{ 
+                    anchors.verticalCenter: parent.verticalCenter
+                    file: "GenericItem.qml"
+                    image: "images/rabbit_bw.png"
                 }
             }
-
+            Text{ text: "Active Suns: " + activeSuns }
             Rectangle { width: 440; height: 1; color: "black" }
             Text{ text: "Arbitrary QML: " }
             TextEdit {
                 id: qmlText
                 width: 460
-                height: 180
+                height: 220
                 readOnly: false
                 focusOnPress: true
+                font.pixelSize: 16
                 
-                text: "import Qt 4.6\nImage { id: smile; x: 10; y: 10; \n  source: 'images/face-smile.png';\n  opacity: NumberAnimation{ \n    running:true; to: 0; duration: 1500;\n  }\n   Component.onCompleted: smile.destroy(1500);\n}"
+                text: "import Qt 4.6\nImage { id: smile;\n  x: 500*Math.random();\n  y: 250*Math.random(); \n  source: 'images/face-smile.png';\n  opacity: NumberAnimation{ \n    running:true; to: 0; duration: 1500;\n  }\n   Component.onCompleted: smile.destroy(1500);\n}"
             }
             Rectangle {
                 width: 80
diff --git a/examples/declarative/dynamic/images/NOTE b/examples/declarative/dynamic/images/NOTE
new file mode 100644
index 0000000..fcd87f9
--- /dev/null
+++ b/examples/declarative/dynamic/images/NOTE
@@ -0,0 +1 @@
+Images (except star.png) are from the KDE project.
diff --git a/examples/declarative/dynamic/images/moon.png b/examples/declarative/dynamic/images/moon.png
new file mode 100644
index 0000000..1c0d606
--- /dev/null
+++ b/examples/declarative/dynamic/images/moon.png
diff --git a/examples/declarative/dynamic/images/rabbit_brown.png b/examples/declarative/dynamic/images/rabbit_brown.png
new file mode 100644
index 0000000..ebfdeed
--- /dev/null
+++ b/examples/declarative/dynamic/images/rabbit_brown.png
diff --git a/examples/declarative/dynamic/images/rabbit_bw.png b/examples/declarative/dynamic/images/rabbit_bw.png
new file mode 100644
index 0000000..7bff9b9
--- /dev/null
+++ b/examples/declarative/dynamic/images/rabbit_bw.png
diff --git a/examples/declarative/dynamic/images/tree_s.png b/examples/declarative/dynamic/images/tree_s.png
new file mode 100644
index 0000000..6eac35a
--- /dev/null
+++ b/examples/declarative/dynamic/images/tree_s.png
diff --git a/examples/declarative/dynamic/sunCreation.js b/examples/declarative/dynamic/itemCreation.js
index d9e5dce..3c3123b 100644
--- a/examples/declarative/dynamic/sunCreation.js
+++ b/examples/declarative/dynamic/itemCreation.js
@@ -1,14 +1,25 @@
-var sunComponent = null;
+var itemComponent = null;
 var draggedItem = null;
 var startingMouse;
+var startingZ;
 //Until QT-2385 is resolved we need to convert to scene coordinates manually
 var xOffset;
 var yOffset;
+function setSceneOffset()
+{
+    xOffset = 0;
+    yOffset = 0;
+    var p = itemButton;
+    while(p != window){
+        xOffset += p.x;
+        yOffset += p.y;
+        p = p.parent;
+    }
+}
 
 function startDrag(mouse)
 {
-    xOffset = toolbox.x + toolboxPositioner.x;
-    yOffset = toolbox.y + toolboxPositioner.y;
+    setSceneOffset();
     startingMouse = mouse;
     loadComponent();
 }
@@ -17,25 +28,27 @@ function startDrag(mouse)
 //possible external files are loaded.
 
 function loadComponent() {
-    if (sunComponent != null) //Already loaded the component
-        createSun();
+    if (itemComponent != null) //Already loaded the component
+        createItem();
 
-    sunComponent = createComponent("Sun.qml");
-    if(sunComponent.isLoading){
+    itemComponent = createComponent(itemButton.file);
+    if(itemComponent.isLoading){
         component.statusChanged.connect(finishCreation);
     }else{//Depending on the content, it can be ready or error immediately
-        createSun();
+        createItem();
     }
 }
 
-function createSun() {
-    if (sunComponent.isReady && draggedItem == null) {
-        draggedItem = sunComponent.createObject();
+function createItem() {
+    if (itemComponent.isReady && draggedItem == null) {
+        draggedItem = itemComponent.createObject();
         draggedItem.parent = window;
+        draggedItem.image = itemButton.image;
         draggedItem.x = startingMouse.x + xOffset;
         draggedItem.y = startingMouse.y + yOffset;
+        startingZ = draggedItem.z;
         draggedItem.z = 4;//On top
-    } else if (sunComponent.isError) {
+    } else if (itemComponent.isError) {
         draggedItem = null;
         print("error creating component");
         print(component.errorsString());
@@ -56,12 +69,11 @@ function endDrag(mouse)
     if(draggedItem == null)
         return;
 
-    if(draggedItem.x + draggedItem.width > toolbox.x //Don't drop it in the toolbox
-        || draggedItem.y > ground.y){//Don't drop it on the ground
+    if(draggedItem.x + draggedItem.width > toolbox.x){ //Don't drop it in the toolbox
         draggedItem.destroy();
         draggedItem = null;
     }else{
-        draggedItem.z = 1;
+        draggedItem.z = startingZ;
         draggedItem.created = true;
         draggedItem = null;
     }