- Chart DnD: Creating and deleting sprite

lib/sales-pipeline.adp

@@ -18,28 +18,38 @@ Ext.require([
 ]);
 
 function launchDiagram(){
+    // Store of all main projects and project specific fields
     var projectMainStore = Ext.StoreManager.get('projectMainStore');
 
+    // Store of chart items with chart specific values x_axis, color, etc.
     var chartStore = Ext.create('Ext.data.JsonStore', {
         fields: ['x_axis', 'y_axis', 'color', 'diameter', 'caption'],
         data: [
 	]
     });
 
+    // Transform project values into chart values
     projectMainStore.each(function (rec) {
-	console.log('Store.each: '+rec);
-	var color = "lightblue";
-	switch (rec.get('on_track_status_id') {
-	case '66':
-	    color = "green";
-	    break;
+	var on_track_status = rec.get('on_track_status_id');         // "66"=green, "67"=yellow, "68"=red, ""=undef
+	var presales_value = rec.get('presales_value');              // String with number
+	var presales_probability = rec.get('presales_probability');  // String with number
+	if ("" == presales_value) { presales_value = 0;  }
+	if ("" == presales_probability) { presales_probability = 0; }
+	presales_value = parseFloat(presales_value);                 // Convert to float number
+	presales_probability = parseFloat(presales_probability);
+
+	var color = "white";
+	switch (on_track_status) {
+	case '66': color = "green"; break;
+	case '67': color = "orange"; break;
+	case '68': color = "red"; break;
 	}
 
 	chartStore.add({
-	    x_axis: parseFloat(rec.get('presales_value')),
-	    y_axis: parseFloat(rec.get('presales_probability')),
+	    x_axis: presales_value,
+	    y_axis: presales_probability,
 	    color: color,
-	    diameter: 30,
+	    diameter: 10,
 	    caption: rec.get('project_name')
 	});
     });
@@ -47,8 +57,8 @@ function launchDiagram(){
     function createHandler(fieldName) {
 	return function(sprite, record, attr, index, store) {
 	    return Ext.apply(attr, {
-		radius: 20,                         // record.get('diameter'),
-		fill: record.get('color')                         // record.get('color')
+		radius: record.get('diameter'),
+		fill: record.get('color')
 	    });
 	};
     };
@@ -87,6 +97,53 @@ function launchDiagram(){
 	}]
     });
 
+    var dndOrgSprite = null;
+    var dndSpriteShadow = null;
+    var dndStartXY = null;
+    
+    var onSpriteMouseDown = function(sprite, event, eOpts) {
+	console.log("onSpriteMouseDown: "+event.getXY());
+	dndOrgSprite = sprite;
+	dndStartXY = event.getXY();
+
+	// Create a copy of the sprite without fill
+	var attrs = Ext.clone(sprite.attr);
+	delete attrs.fill;
+	attrs.type = sprite.type;
+	attrs.radius = 15;
+	attrs.stroke = 'blue';
+	attrs['stroke-opacity'] = 1.0;
+	dndSpriteShadow = sprite.surface.add(attrs).show(true);
+	
+    };
+    var onSurfaceMouseMove = function(event, eOpts) {
+	if (dndOrgSprite == null) { return; }
+	console.log("onSurfaceMouseMove: "+event.getXY());
+	var xy = event.getXY();
+	dndSpriteShadow.setAttributes({
+	    x: xy.x,
+	    y: xy.y
+	}, true);
+    };
+
+    var onSurfaceMouseUp = function(event, eOpts) {
+	console.log("onSurfaceMouseUp: "+event.getXY());
+	this.remove(dndSpriteShadow, true);
+	dndSpriteShadow = null;
+	dndOrgSprite = null;
+	dndStart = null;
+    };
+
+
+    // Add drag-and-drop listeners to the sprites
+    var surface = chart.surface;
+    var items = surface.items.items;
+    for (var i = 0, ln = items.length; i < ln; i++) {
+	items[i].on("mousedown", onSpriteMouseDown, items[i]);
+    }
+    surface.on("mousemove", onSurfaceMouseMove, surface);
+    surface.on("mouseup", onSurfaceMouseUp, surface);
+
 };
 
 Ext.onReady(function() {