From 0eb739ab722ea768ab0fa1c5de0ee09ed1a576ea Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Tue, 14 Feb 2012 00:25:45 -0800 Subject: Add support for drag and drop for the components. Signed-off-by: Valerio Virgillito --- js/mediators/drag-drop-mediator.js | 17 +++--- js/ninja.reel/ninja.html | 1 + .../ComponentsPanelBase.js | 63 +++++++++++++++++----- 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, { writable: true }, + dropDelegate: { + value: null + }, + deserializedFromTemplate: { value: function() { this.eventManager.addEventListener("appLoaded", this, false); @@ -69,13 +73,14 @@ exports.DragDropMediator = Montage.create(Component, { xferString = evt.dataTransfer.getData("text/plain"); if(xferString) { - - if(xferString.lastIndexOf("-Component") !== -1) { - component = xferString.substring(0, xferString.lastIndexOf("-Component")); - NJevent( "executeAddComponent", { "component": component, "dropX": this.baseX, "dropY": this.baseY }); -// ComponentPanelModule.ComponentsPanelBase.addComponentToStage(componentStr.substring(0, compInd), this.baseX, this.baseY); + // If the drop is a component, call the delegate with the top,left coordinates + if(xferString.indexOf("componentDrop") > -1) { + if(this.dropDelegate && typeof this.dropDelegate === 'object') { + this.dropDelegate.handleComponentDrop(this.baseX, this.baseY); + return; + } } - return; + } // 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 @@ "stage": {"@": "stage1"}, "settings": {"@": "settings1"}, "elementMediator": {"@": "elementMediator"}, + "dragDropMediator": {"@": "dragDropMediator"}, "undocontroller": {"@": "undocontroller1"}, "selectionController": {"@": "selectionController1"}, "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 value: 0 }, + dragComponent: { + value: null + }, + + dragPosition: { + value: null + }, + centerStage: { value: null }, + + /********************************************************************* + * Components Tree and Model Creation + *********************************************************************/ + didCreate: { value: function() { + // Setup the drop delegate + this.application.ninja.dragDropMediator.dropDelegate = this; // Loop through the component and load the JSON data for them this._loadComponents(); } @@ -138,36 +153,56 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component } }, - applySelection: { - value: function(selection) { - //console.log(selection); - //console.log(this.componentsData[selection.component]); - this.addComponentToStage(this.componentsData[selection.component]); + /********************************************************************* + * Handle Tree / Drag-Drop events + *********************************************************************/ + + handleDblclick: { + value: function(obj) { + this.addComponentToStage(this.componentsData[obj.component]); } }, - // This method will be used once we handle drag and drop - handleExecuteAddComponent: { - value: function(evt) { + handleDragStart: { + value: function(obj, event) { + this.dragComponent = obj; + event.dataTransfer.effectAllowed = 'move'; + event.dataTransfer.setData('text/plain', 'componentDrop'); + } + }, + + handleComponentDrop: { + value: function(left, top) { + this.addComponentToStage(this.componentsData[this.dragComponent.component], [left, top]); } }, + /** * Send a request to add a component to the user document and waits for a callback to continue */ addComponentToStage: { - value: function(component) { - var that = this; - var element = this.makeComponent(component.component); + value: function(component, position) { + var that, element; + + // Check for position. If none then center on the stage + if(position) { + this.dragPosition = position; + } else { + this.dragPosition = this.getStageCenter(); + + } + that = this; + element = this.makeComponent(component.component); this.application.ninja.currentDocument._window.addComponent(element, {name: component.name, path: component.module}, function(instance, element) { - var pos = that.getStageCenter(); + //var pos = that.getStageCenter(); var styles = { 'position': 'absolute', - 'left' : pos[0] + 'px', - 'top' : pos[1] + 'px', + 'left' : that.dragPosition[0] + 'px', + 'top' : that.dragPosition[1] + 'px', '-webkit-transform-style' : 'preserve-3d', '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' }; -- cgit v1.2.3