CC-2301 : automatically updating the fadein/fadeout for a track in the fadein/fadeout states.
Can enable states on a per track basis.
This commit is contained in:
Naomi
parent
628af95325
commit
a4731d4af2
6 changed files with 162 additions and 123 deletions
|
|
@ -4,55 +4,55 @@ var TrackEditor = function() {
|
|||
|
||||
};
|
||||
|
||||
TrackEditor.prototype.states = {
|
||||
cursor: {
|
||||
events: {
|
||||
mousedown: "selectCursorPos"
|
||||
},
|
||||
TrackEditor.prototype.classes = {
|
||||
"cursor": [
|
||||
"state-select"
|
||||
],
|
||||
|
||||
classes: [
|
||||
"state-select"
|
||||
]
|
||||
"select": [
|
||||
"state-select"
|
||||
],
|
||||
|
||||
"fadein": [
|
||||
"state-select"
|
||||
],
|
||||
|
||||
"fadeout": [
|
||||
"state-select"
|
||||
],
|
||||
|
||||
"shift": [
|
||||
"state-shift"
|
||||
],
|
||||
|
||||
"active": [
|
||||
"active"
|
||||
],
|
||||
|
||||
"disabled": [
|
||||
"disabled"
|
||||
]
|
||||
};
|
||||
|
||||
TrackEditor.prototype.events = {
|
||||
"cursor": {
|
||||
"mousedown": "selectCursorPos"
|
||||
},
|
||||
|
||||
select: {
|
||||
events: {
|
||||
mousedown: "selectStart"
|
||||
},
|
||||
|
||||
classes: [
|
||||
"state-select"
|
||||
]
|
||||
"select": {
|
||||
"mousedown": "selectStart"
|
||||
},
|
||||
|
||||
fadein: {
|
||||
events: {
|
||||
mousedown: "selectFadeIn"
|
||||
},
|
||||
|
||||
classes: [
|
||||
"state-select"
|
||||
]
|
||||
"fadein": {
|
||||
"mousedown": "selectFadeIn"
|
||||
},
|
||||
|
||||
fadeout: {
|
||||
events: {
|
||||
mousedown: "selectFadeOut"
|
||||
},
|
||||
|
||||
classes: [
|
||||
"state-select"
|
||||
]
|
||||
"fadeout": {
|
||||
"mousedown": "selectFadeOut"
|
||||
},
|
||||
|
||||
shift: {
|
||||
events: {
|
||||
mousedown: "timeShift"
|
||||
},
|
||||
|
||||
classes: [
|
||||
"state-shift"
|
||||
]
|
||||
"shift": {
|
||||
"mousedown": "timeShift"
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -64,7 +64,22 @@ TrackEditor.prototype.setWidth = function(width) {
|
|||
this.width = width;
|
||||
};
|
||||
|
||||
TrackEditor.prototype.init = function(src, start, end, fades, cues, moveable) {
|
||||
TrackEditor.prototype.init = function(src, start, end, fades, cues, stateConfig) {
|
||||
|
||||
var statesEnabled = {
|
||||
'cursor': true,
|
||||
'fadein': true,
|
||||
'fadeout': true,
|
||||
'select': true,
|
||||
'shift': true
|
||||
};
|
||||
|
||||
//extend enabled states config.
|
||||
Object.keys(statesEnabled).forEach(function (key) {
|
||||
statesEnabled[key] = (key in stateConfig) ? stateConfig[key] : statesEnabled[key];
|
||||
});
|
||||
|
||||
this.enabledStates = statesEnabled;
|
||||
|
||||
makePublisher(this);
|
||||
|
||||
|
|
@ -103,8 +118,7 @@ TrackEditor.prototype.init = function(src, start, end, fades, cues, moveable) {
|
|||
|
||||
this.selectedArea = undefined; //selected area of track stored as inclusive buffer indices to the audio buffer.
|
||||
this.active = false;
|
||||
this.canShift = moveable !== undefined ? moveable : true;
|
||||
|
||||
|
||||
this.container.classList.add("channel-wrapper");
|
||||
this.container.style.left = this.leftOffset;
|
||||
|
||||
|
|
@ -140,7 +154,7 @@ TrackEditor.prototype.loadTrack = function(track) {
|
|||
cuein: track.cuein,
|
||||
cueout: track.cueout
|
||||
},
|
||||
track.moveable
|
||||
track.states
|
||||
);
|
||||
this.loadBuffer(track.src);
|
||||
|
||||
|
|
@ -244,7 +258,6 @@ TrackEditor.prototype.deactivate = function() {
|
|||
this.active = false;
|
||||
this.selectedArea = undefined;
|
||||
this.container.classList.remove("active");
|
||||
//this.drawer.draw(-1, this.getPixelOffset());
|
||||
this.updateEditor(-1, undefined, undefined, true);
|
||||
};
|
||||
|
||||
|
|
@ -261,10 +274,6 @@ TrackEditor.prototype.timeShift = function(e) {
|
|||
scroll = this.config.getTrackScroll(),
|
||||
scrollX = scroll.left;
|
||||
|
||||
if (this.canShift === false) {
|
||||
return; //setting the 'left' css property has no effect, but don't want internal variable leftOffset to update.
|
||||
}
|
||||
|
||||
origX = editor.leftOffset / res;
|
||||
|
||||
//dynamically put an event on the element.
|
||||
|
|
@ -530,12 +539,10 @@ TrackEditor.prototype.selectCursorPos = function(e) {
|
|||
};
|
||||
|
||||
TrackEditor.prototype.selectFadeIn = function(e) {
|
||||
var editor = this,
|
||||
startX = e.layerX || e.offsetX, //relative to e.target (want the canvas).
|
||||
offset = this.leftOffset,
|
||||
startTime,
|
||||
endTime,
|
||||
layerOffset;
|
||||
var startX = e.layerX || e.offsetX, //relative to e.target (want the canvas).
|
||||
layerOffset,
|
||||
FADETYPE = "FadeIn",
|
||||
shape = this.config.getFadeType();
|
||||
|
||||
layerOffset = this.findLayerOffset(e);
|
||||
if (layerOffset < 0) {
|
||||
|
|
@ -543,23 +550,16 @@ TrackEditor.prototype.selectFadeIn = function(e) {
|
|||
}
|
||||
startX = startX + layerOffset;
|
||||
|
||||
editor.setSelectedArea(undefined, startX);
|
||||
startTime = editor.samplesToSeconds(offset + editor.selectedArea.start);
|
||||
endTime = editor.samplesToSeconds(offset + editor.selectedArea.end);
|
||||
|
||||
editor.updateEditor(-1, undefined, undefined, true);
|
||||
editor.notifySelectUpdate(startTime, endTime);
|
||||
|
||||
editor.activateAudioSelection();
|
||||
this.setSelectedArea(undefined, startX);
|
||||
this.removeFadeType(FADETYPE);
|
||||
this.createFade(FADETYPE, shape);
|
||||
};
|
||||
|
||||
TrackEditor.prototype.selectFadeOut = function(e) {
|
||||
var editor = this,
|
||||
startX = e.layerX || e.offsetX, //relative to e.target (want the canvas).
|
||||
offset = this.leftOffset,
|
||||
startTime,
|
||||
endTime,
|
||||
layerOffset;
|
||||
var startX = e.layerX || e.offsetX, //relative to e.target (want the canvas).
|
||||
layerOffset,
|
||||
FADETYPE = "FadeOut",
|
||||
shape = this.config.getFadeType();
|
||||
|
||||
layerOffset = this.findLayerOffset(e);
|
||||
if (layerOffset < 0) {
|
||||
|
|
@ -567,14 +567,9 @@ TrackEditor.prototype.selectFadeOut = function(e) {
|
|||
}
|
||||
startX = startX + layerOffset;
|
||||
|
||||
editor.setSelectedArea(startX, undefined);
|
||||
startTime = editor.samplesToSeconds(offset + editor.selectedArea.start);
|
||||
endTime = editor.samplesToSeconds(offset + editor.selectedArea.end);
|
||||
|
||||
editor.updateEditor(-1, undefined, undefined, true);
|
||||
editor.notifySelectUpdate(startTime, endTime);
|
||||
|
||||
editor.activateAudioSelection();
|
||||
this.setSelectedArea(startX, undefined);
|
||||
this.removeFadeType(FADETYPE);
|
||||
this.createFade(FADETYPE, shape);
|
||||
};
|
||||
|
||||
/* end of state methods */
|
||||
|
|
@ -594,6 +589,21 @@ TrackEditor.prototype.saveFade = function(id, type, shape, start, end) {
|
|||
TrackEditor.prototype.removeFade = function(id) {
|
||||
|
||||
delete this.fades[id];
|
||||
this.drawer.removeFade(id);
|
||||
};
|
||||
|
||||
TrackEditor.prototype.removeFadeType = function(type) {
|
||||
var id,
|
||||
fades = this.fades,
|
||||
fade;
|
||||
|
||||
for (id in fades) {
|
||||
fade = fades[id];
|
||||
|
||||
if (fade.type === type) {
|
||||
this.removeFade(id);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
|
|
@ -645,9 +655,8 @@ TrackEditor.prototype.onTrackEdit = function(event) {
|
|||
}
|
||||
};
|
||||
|
||||
TrackEditor.prototype.onCreateFade = function(args) {
|
||||
TrackEditor.prototype.createFade = function(type, shape) {
|
||||
var selected = this.selectedArea,
|
||||
pixelOffset = this.getPixelOffset(),
|
||||
start = this.samplesToPixels(selected.start),
|
||||
end = this.samplesToPixels(selected.end),
|
||||
startTime = this.samplesToSeconds(selected.start),
|
||||
|
|
@ -655,10 +664,13 @@ TrackEditor.prototype.onCreateFade = function(args) {
|
|||
id = this.getFadeId();
|
||||
|
||||
this.resetCursor();
|
||||
this.saveFade(id, args.type, args.shape, startTime, endTime);
|
||||
this.drawer.draw(-1, pixelOffset);
|
||||
this.drawer.drawFade(id, args.type, args.shape, start, end);
|
||||
this.saveFade(id, type, shape, startTime, endTime);
|
||||
this.updateEditor(-1, undefined, undefined, true);
|
||||
this.drawer.drawFade(id, type, shape, start, end);
|
||||
};
|
||||
|
||||
TrackEditor.prototype.onCreateFade = function(args) {
|
||||
this.createFade(args.type, args.shape);
|
||||
this.deactivateAudioSelection();
|
||||
};
|
||||
|
||||
|
|
@ -692,8 +704,10 @@ TrackEditor.prototype.onRemoveAudio = function() {
|
|||
|
||||
TrackEditor.prototype.setState = function(state) {
|
||||
var that = this,
|
||||
stateEvents = this.states[state].events,
|
||||
stateClasses = this.states[state].classes,
|
||||
stateEvents = this.events[state],
|
||||
stateClasses = this.classes[state],
|
||||
disabledClasses = this.classes['disabled'],
|
||||
enabledStates = this.enabledStates,
|
||||
container = this.container,
|
||||
prevState = this.currentState,
|
||||
prevStateClasses,
|
||||
|
|
@ -702,38 +716,45 @@ TrackEditor.prototype.setState = function(state) {
|
|||
i, len;
|
||||
|
||||
if (prevState) {
|
||||
prevStateClasses = this.states[prevState].classes;
|
||||
prevStateClasses = this.classes[prevState];
|
||||
|
||||
for (event in prevStateEvents) {
|
||||
container.removeEventListener(event, prevStateEvents[event]);
|
||||
}
|
||||
this.prevStateEvents = {};
|
||||
if (enabledStates[prevState] === true) {
|
||||
for (event in prevStateEvents) {
|
||||
container.removeEventListener(event, prevStateEvents[event]);
|
||||
}
|
||||
this.prevStateEvents = {};
|
||||
|
||||
for (i = 0, len = prevStateClasses.length; i < len; i++) {
|
||||
container.classList.remove(prevStateClasses[i]);
|
||||
for (i = 0, len = prevStateClasses.length; i < len; i++) {
|
||||
container.classList.remove(prevStateClasses[i]);
|
||||
}
|
||||
}
|
||||
else {
|
||||
for (i = 0, len = disabledClasses.length; i < len; i++) {
|
||||
container.classList.remove(disabledClasses[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (event in stateEvents) {
|
||||
|
||||
func = that[stateEvents[event]].bind(that);
|
||||
//need to keep track of the added events for later removal since a new function is returned after using "bind"
|
||||
this.prevStateEvents[event] = func;
|
||||
container.addEventListener(event, func);
|
||||
}
|
||||
for (i = 0, len = stateClasses.length; i < len; i++) {
|
||||
if (enabledStates[state] === true) {
|
||||
for (event in stateEvents) {
|
||||
func = that[stateEvents[event]].bind(that);
|
||||
//need to keep track of the added events for later removal since a new function is returned after using "bind"
|
||||
this.prevStateEvents[event] = func;
|
||||
container.addEventListener(event, func);
|
||||
}
|
||||
for (i = 0, len = stateClasses.length; i < len; i++) {
|
||||
container.classList.add(stateClasses[i]);
|
||||
}
|
||||
}
|
||||
else {
|
||||
for (i = 0, len = disabledClasses.length; i < len; i++) {
|
||||
container.classList.add(disabledClasses[i]);
|
||||
}
|
||||
}
|
||||
|
||||
this.currentState = state;
|
||||
};
|
||||
|
||||
TrackEditor.prototype.onStateChange = function() {
|
||||
var state = this.config.getState();
|
||||
|
||||
this.setState(state);
|
||||
};
|
||||
|
||||
TrackEditor.prototype.onResolutionChange = function(res) {
|
||||
var selected = this.selectedArea;
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue