From be9f677acda01ec95e3598b2d8ff6848deb31eb4 Mon Sep 17 00:00:00 2001 From: liteng <930372551@qq.com> Date: Sun, 23 Sep 2018 10:48:50 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8B=96=E5=8A=A8=E5=8A=A8=E7=94=BB=E6=BB=91?= =?UTF-8?q?=E5=9D=97=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ShadowEditor.Web/assets/css/main.css | 1 + .../src/editor/animation/AnimationGroup.js | 2 +- .../src/editor/animation/AnimationManager.js | 2 +- .../src/editor/bottom/AnimationPanel.js | 59 ++++++++++++++++++- 4 files changed, 60 insertions(+), 4 deletions(-) diff --git a/ShadowEditor.Web/assets/css/main.css b/ShadowEditor.Web/assets/css/main.css index 2d1b09cf..b76ce42a 100644 --- a/ShadowEditor.Web/assets/css/main.css +++ b/ShadowEditor.Web/assets/css/main.css @@ -857,6 +857,7 @@ table.Table .TableBody td { .animation-panel .box .groups { position: absolute; + top: 34px; width: 100%; flex: 1; } diff --git a/ShadowEditor.Web/src/editor/animation/AnimationGroup.js b/ShadowEditor.Web/src/editor/animation/AnimationGroup.js index c1c0137e..6059113f 100644 --- a/ShadowEditor.Web/src/editor/animation/AnimationGroup.js +++ b/ShadowEditor.Web/src/editor/animation/AnimationGroup.js @@ -50,7 +50,7 @@ AnimationGroup.prototype.remove = function (animation) { * 移除 * @param {*} index */ -Animation.prototype.removeAt = function (index) { +AnimationGroup.prototype.removeAt = function (index) { this.animations.splice(index, 1); }; diff --git a/ShadowEditor.Web/src/editor/animation/AnimationManager.js b/ShadowEditor.Web/src/editor/animation/AnimationManager.js index e7645614..ffac300b 100644 --- a/ShadowEditor.Web/src/editor/animation/AnimationManager.js +++ b/ShadowEditor.Web/src/editor/animation/AnimationManager.js @@ -16,7 +16,7 @@ function AnimationManager(app) { AnimationManager.prototype.clear = function () { this.animations = []; - for (var i = 0; i < 4; i++) { + for (var i = 0; i < 3; i++) { var group = new AnimationGroup({ name: `组${i + 1}`, index: i diff --git a/ShadowEditor.Web/src/editor/bottom/AnimationPanel.js b/ShadowEditor.Web/src/editor/bottom/AnimationPanel.js index b49acab3..bbb7c354 100644 --- a/ShadowEditor.Web/src/editor/bottom/AnimationPanel.js +++ b/ShadowEditor.Web/src/editor/bottom/AnimationPanel.js @@ -17,6 +17,8 @@ function AnimationPanel(options) { this.status = STOP; this.sliderLeft = 0; this.speed = 4; + + this.isDragging = false; }; AnimationPanel.prototype = Object.create(UI.Control.prototype); @@ -147,7 +149,7 @@ AnimationPanel.prototype.onAppStarted = function () { groups.dom.addEventListener(`dblclick`, this.onDblClick.bind(this)); groups.dom.addEventListener(`mousedown`, this.onMouseDown.bind(this)); groups.dom.addEventListener(`mousemove`, this.onMouseMove.bind(this)); - groups.dom.addEventListener(`mouseup`, this.onMouseUp.bind(this)); + document.body.addEventListener(`mouseup`, this.onMouseUp.bind(this)); this.app.on(`animationChanged.${this.id}`, this.onUpdateUI.bind(this)); }; @@ -167,15 +169,24 @@ AnimationPanel.prototype.onUpdateUI = function () { animations.forEach(n => { var group = document.createElement('div'); group.className = 'group'; + group.setAttribute('droppable', true); group.data = n; + group.addEventListener('dragenter', this.onDragEnterGroup.bind(this)); + group.addEventListener('dragover', this.onDragOverGroup.bind(this)); + group.addEventListener('dragleave', this.onDragLeaveGroup.bind(this)); + group.addEventListener('drop', this.onDropGroup.bind(this)); groups.dom.appendChild(group); n.animations.forEach(m => { var item = document.createElement('div'); + item.data = m; item.className = 'item'; + item.setAttribute('draggable', true); item.style.left = m.startTime * timeline.scale + 'px'; item.style.width = (m.endTime - m.startTime) * timeline.scale + 'px'; item.innerHTML = m.name; + item.addEventListener('dragstart', this.onDragStartAnimation.bind(this)); + item.addEventListener('dragend', this.onDragEndAnimation.bind(this)); group.appendChild(item); }); }); @@ -295,7 +306,10 @@ AnimationPanel.prototype.onDblClick = function (event) { }; AnimationPanel.prototype.onMouseDown = function () { - + if (this.isDragging) { + return; + } + this.isDragging = true; }; AnimationPanel.prototype.onMouseMove = function () { @@ -303,7 +317,48 @@ AnimationPanel.prototype.onMouseMove = function () { }; AnimationPanel.prototype.onMouseUp = function () { + this.isDragging = false; +}; +// ----------------------- 拖动动画事件 --------------------------------------------- + +AnimationPanel.prototype.onDragStartAnimation = function (event) { + event.dataTransfer.setData('uuid', event.target.data.uuid); +}; + +AnimationPanel.prototype.onDragEndAnimation = function (event) { + event.dataTransfer.clearData(); +}; + +AnimationPanel.prototype.onDragEnterGroup = function (event) { + event.preventDefault(); +}; + +AnimationPanel.prototype.onDragOverGroup = function (event) { + event.preventDefault(); +}; + +AnimationPanel.prototype.onDragLeaveGroup = function (event) { + event.preventDefault(); +}; + +AnimationPanel.prototype.onDropGroup = function (event) { + event.preventDefault(); + var uuid = event.dataTransfer.getData('uuid'); + + var groups = this.app.editor.animation.getAnimations(); + var group = groups.filter(n => n.animations.findIndex(m => m.uuid === uuid) > -1)[0]; + var animation = group.animations.filter(n => n.uuid === uuid)[0]; + group.remove(animation); + + var timeline = UI.get('timeline', this.id); + var length = animation.endTime - animation.startTime; + animation.startTime = event.offsetX / timeline.scale; + animation.endTime = animation.startTime + length; + + event.target.data.add(animation); + + this.onUpdateUI(); }; export default AnimationPanel; \ No newline at end of file