aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--js/mediators/drag-drop-mediator.js17
-rw-r--r--js/ninja.reel/ninja.html1
-rw-r--r--js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js63
3 files changed, 61 insertions, 20 deletions
diff --git a/js/mediators/drag-drop-mediator.js b/js/mediators/drag-drop-mediator.js
index ede71383..bf22aed2 100644
--- a/js/mediators/drag-drop-mediator.js
+++ b/js/mediators/drag-drop-mediator.js
@@ -24,6 +24,10 @@ exports.DragDropMediator = Montage.create(Component, {
24 writable: true 24 writable: true
25 }, 25 },
26 26
27 dropDelegate: {
28 value: null
29 },
30
27 deserializedFromTemplate: { 31 deserializedFromTemplate: {
28 value: function() { 32 value: function() {
29 this.eventManager.addEventListener("appLoaded", this, false); 33 this.eventManager.addEventListener("appLoaded", this, false);
@@ -69,13 +73,14 @@ exports.DragDropMediator = Montage.create(Component, {
69 73
70 xferString = evt.dataTransfer.getData("text/plain"); 74 xferString = evt.dataTransfer.getData("text/plain");
71 if(xferString) { 75 if(xferString) {
72 76 // If the drop is a component, call the delegate with the top,left coordinates
73 if(xferString.lastIndexOf("-Component") !== -1) { 77 if(xferString.indexOf("componentDrop") > -1) {
74 component = xferString.substring(0, xferString.lastIndexOf("-Component")); 78 if(this.dropDelegate && typeof this.dropDelegate === 'object') {
75 NJevent( "executeAddComponent", { "component": component, "dropX": this.baseX, "dropY": this.baseY }); 79 this.dropDelegate.handleComponentDrop(this.baseX, this.baseY);
76// ComponentPanelModule.ComponentsPanelBase.addComponentToStage(componentStr.substring(0, compInd), this.baseX, this.baseY); 80 return;
81 }
77 } 82 }
78 return; 83
79 } 84 }
80 85
81 // Verify that browser supports FileReader API. 86 // Verify that browser supports FileReader API.
diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html
index c8625159..6daa75de 100644
--- a/js/ninja.reel/ninja.html
+++ b/js/ninja.reel/ninja.html
@@ -276,6 +276,7 @@
276 "stage": {"@": "stage1"}, 276 "stage": {"@": "stage1"},
277 "settings": {"@": "settings1"}, 277 "settings": {"@": "settings1"},
278 "elementMediator": {"@": "elementMediator"}, 278 "elementMediator": {"@": "elementMediator"},
279 "dragDropMediator": {"@": "dragDropMediator"},
279 "undocontroller": {"@": "undocontroller1"}, 280 "undocontroller": {"@": "undocontroller1"},
280 "selectionController": {"@": "selectionController1"}, 281 "selectionController": {"@": "selectionController1"},
281 "documentController": {"@": "documentController1"}, 282 "documentController": {"@": "documentController1"},
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 };