aboutsummaryrefslogtreecommitdiff
path: root/js/panels
diff options
context:
space:
mode:
authorValerio Virgillito2012-02-14 00:25:45 -0800
committerValerio Virgillito2012-02-14 00:25:45 -0800
commit0eb739ab722ea768ab0fa1c5de0ee09ed1a576ea (patch)
treea2c02a6447705e87e22e013db792473a9a54adef /js/panels
parent081f17954c735fc8b946d72a25b0ee60d370ef9b (diff)
downloadninja-0eb739ab722ea768ab0fa1c5de0ee09ed1a576ea.tar.gz
Add support for drag and drop for the components.
Signed-off-by: Valerio Virgillito <valerio@motorola.com>
Diffstat (limited to 'js/panels')
-rw-r--r--js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js63
1 files changed, 49 insertions, 14 deletions
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index 953c0484..7e5a76ee 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -53,12 +53,27 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
53 value: 0 53 value: 0
54 }, 54 },
55 55
56 dragComponent: {
57 value: null
58 },
59
60 dragPosition: {
61 value: null
62 },
63
56 centerStage: { 64 centerStage: {
57 value: null 65 value: null
58 }, 66 },
59 67
68
69 /*********************************************************************
70 * Components Tree and Model Creation
71 *********************************************************************/
72
60 didCreate: { 73 didCreate: {
61 value: function() { 74 value: function() {
75 // Setup the drop delegate
76 this.application.ninja.dragDropMediator.dropDelegate = this;
62 // Loop through the component and load the JSON data for them 77 // Loop through the component and load the JSON data for them
63 this._loadComponents(); 78 this._loadComponents();
64 } 79 }
@@ -138,36 +153,56 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
138 } 153 }
139 }, 154 },
140 155
141 applySelection: { 156 /*********************************************************************
142 value: function(selection) { 157 * Handle Tree / Drag-Drop events
143 //console.log(selection); 158 *********************************************************************/
144 //console.log(this.componentsData[selection.component]); 159
145 this.addComponentToStage(this.componentsData[selection.component]); 160 handleDblclick: {
161 value: function(obj) {
162 this.addComponentToStage(this.componentsData[obj.component]);
146 } 163 }
147 }, 164 },
148 165
149 // This method will be used once we handle drag and drop 166 handleDragStart: {
150 handleExecuteAddComponent: { 167 value: function(obj, event) {
151 value: function(evt) { 168 this.dragComponent = obj;
169 event.dataTransfer.effectAllowed = 'move';
170 event.dataTransfer.setData('text/plain', 'componentDrop');
171 }
172 },
173
174 handleComponentDrop: {
175 value: function(left, top) {
176 this.addComponentToStage(this.componentsData[this.dragComponent.component], [left, top]);
152 } 177 }
153 }, 178 },
154 179
180
155 /** 181 /**
156 * Send a request to add a component to the user document and waits for a callback to continue 182 * Send a request to add a component to the user document and waits for a callback to continue
157 */ 183 */
158 addComponentToStage: { 184 addComponentToStage: {
159 value: function(component) { 185 value: function(component, position) {
160 var that = this; 186 var that, element;
161 var element = this.makeComponent(component.component); 187
188 // Check for position. If none then center on the stage
189 if(position) {
190 this.dragPosition = position;
191 } else {
192 this.dragPosition = this.getStageCenter();
193
194 }
195 that = this;
196 element = this.makeComponent(component.component);
162 197
163 this.application.ninja.currentDocument._window.addComponent(element, {name: component.name, path: component.module}, function(instance, element) { 198 this.application.ninja.currentDocument._window.addComponent(element, {name: component.name, path: component.module}, function(instance, element) {
164 199
165 var pos = that.getStageCenter(); 200 //var pos = that.getStageCenter();
166 201
167 var styles = { 202 var styles = {
168 'position': 'absolute', 203 'position': 'absolute',
169 'left' : pos[0] + 'px', 204 'left' : that.dragPosition[0] + 'px',
170 'top' : pos[1] + 'px', 205 'top' : that.dragPosition[1] + 'px',
171 '-webkit-transform-style' : 'preserve-3d', 206 '-webkit-transform-style' : 'preserve-3d',
172 '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' 207 '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
173 }; 208 };