archive-gh-me/ShadowEditor
1
0
Fork 0
mirror of https://github.com/tengge1/ShadowEditor.git synced 2026-01-25 15:08:11 +00:00
Code Issues Projects Releases Wiki Activity

拖动动画。

Browse Source
This commit is contained in:
tengge1 2019-08-25 10:06:10 +08:00
parent 078ddf6771
commit 9974fda7dc
2 changed files with 49 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
ShadowEditor.Web/src/editor/timeline/TimelinePanel.jsx
View File

@ -24,6 +24,7 @@ class TimelinePanel extends React.Component {
this.handleSelectedLayerChange = this.handleSelectedLayerChange.bind(this);
this.handleAddAnimation = this.handleAddAnimation.bind(this);
this.handleDropAnimation = this.handleDropAnimation.bind(this);
this.updateUI = this.updateUI.bind(this);
}
@ -41,7 +42,8 @@ class TimelinePanel extends React.Component {
onDeleteLayer={this.handleDeleteLayer}
onSelectedLayerChange={this.handleSelectedLayerChange}
onAddAnimation={this.handleAddAnimation}></Timeline>;
onAddAnimation={this.handleAddAnimation}
onDropAnimation={this.handleDropAnimation}></Timeline>;
}
componentDidMount() {
@ -50,61 +52,13 @@ class TimelinePanel extends React.Component {
}
updateUI() {
const animations = app.editor.animations;
this.setState({
animations,
animations: app.editor.animations,
});
// var timeline = UI.get('timeline', this.id);
// var layerInfo = UI.get('layerInfo', this.id);
// var layers = UI.get('layers', this.id);
// while (layerInfo.dom.children.length) {
// var child = layerInfo.dom.children[0];
// layerInfo.dom.removeChild(child);
// }
// while (layers.dom.children.length) {
// var child = layers.dom.children[0];
// child.data = null;
// layers.dom.removeChild(child);
// }
// animations.forEach(n => {
// // 动画组信息区
// var layerName = document.createElement('div');
// layerName.className = 'layer-info';
// layerName.innerHTML = `<input type="checkbox" data-uuid="${n.uuid}" />${n.layerName || n.name}`; // || n.name兼容旧数据
// layerInfo.dom.appendChild(layerName);
// // 动画区
// var layer = document.createElement('div');
// layer.className = 'layer';
// layer.setAttribute('droppable', true);
// layer.data = n;
// layer.addEventListener('dragenter', this.onDragEnterLayer.bind(this));
// layer.addEventListener('dragover', this.onDragOverLayer.bind(this));
// layer.addEventListener('dragleave', this.onDragLeaveLayer.bind(this));
// layer.addEventListener('drop', this.onDropLayer.bind(this));
// layers.dom.appendChild(layer);
// n.animations.forEach(m => {
// var item = document.createElement('div');
// item.data = m;
// item.className = 'item';
// item.setAttribute('draggable', true);
// item.setAttribute('droppable', false);
// item.style.left = m.beginTime * timeline.scale + 'px';
// item.style.width = (m.endTime - m.beginTime) * timeline.scale + 'px';
// item.innerHTML = m.name;
// item.addEventListener('dragstart', this.onDragStartAnimation.bind(this));
// item.addEventListener('dragend', this.onDragEndAnimation.bind(this));
// layer.appendChild(item);
// });
// });
}
// ----------------------- 动画层管理 ------------------------------
handleAddLayer() {
app.prompt({
title: _t('Input Layer Name'),
@ -194,6 +148,8 @@ class TimelinePanel extends React.Component {
});
}
// ---------------------------- 动画管理 ---------------------------------
handleAddAnimation(layerID, beginTime, endTime, event) {
let layer = app.editor.animations.filter(n => n.uuid === layerID)[0];
@ -216,6 +172,41 @@ class TimelinePanel extends React.Component {
app.call(`animationChanged`, this);
}
handleDropAnimation(id, oldLayerID, newLayerID, beginTime, event) {
let oldLayer = app.editor.animations.filter(n => n.uuid === oldLayerID)[0];
if (!oldLayer) {
console.warn(`TimelinePanel: layer ${oldLayerID} is not defined.`);
return;
}
let newLayer = app.editor.animations.filter(n => n.uuid === newLayerID)[0];
if (!newLayer) {
console.warn(`TimelinePanel: layer ${newLayerID} is not defined.`);
return;
}
let index = oldLayer.animations.findIndex(n => n.uuid === id);
if (index === -1) {
console.warn(`TimelinePanel: animation ${id} is not defined.`);
return;
}
let animation = oldLayer.animations[index];
let duration = animation.endTime - animation.beginTime;
animation.beginTime = beginTime;
animation.endTime = beginTime + duration;
oldLayer.animations.splice(index, 1);
newLayer.animations.push(animation);
app.call(`animationChanged`, this);
}
updateSlider() {
var timeline = UI.get('timeline', this.id);
var slider = UI.get('slider', this.id);

9
ShadowEditor.Web/src/ui/timeline/Timeline.jsx
View File

@ -107,6 +107,7 @@ class Timeline extends React.Component {
droppable={'false'}
data-type={'animation'}
data-id={animation.uuid}
data-pid={layer.uuid}
style={{
left: animation.beginTime * this.scale + 'px',
width: (animation.endTime - animation.beginTime) * this.scale + 'px',
@ -266,9 +267,10 @@ class Timeline extends React.Component {
}
const id = event.target.getAttribute('data-id');
const pid = event.target.getAttribute('data-pid');
event.nativeEvent.dataTransfer.setData('id', id);
event.nativeEvent.dataTransfer.setData('offsetX', event.nativeEvent.offsetX);
event.nativeEvent.dataTransfer.setData('pid', pid);
}
handleDragEnd(event) {
@ -295,12 +297,13 @@ class Timeline extends React.Component {
}
const id = event.nativeEvent.dataTransfer.getData('id');
const oldLayerID = event.nativeEvent.dataTransfer.getData('pid');
const layerID = event.target.getAttribute('data-id');
const newLayerID = event.target.getAttribute('data-id');
const beginTime = event.nativeEvent.offsetX / this.scale;
onDropAnimation && onDropAnimation(id, layerID, beginTime, event);
onDropAnimation && onDropAnimation(id, oldLayerID, newLayerID, beginTime, event);
}
parseTime(time) {