skyler
/
Lightningbeam
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Draw audio layers

This commit is contained in:
Skyler Lehmkuhl 2024-12-25 14:15:00 -05:00
parent e12622c7bf
commit 32e6549b99
3 changed files with 66 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/volume-mute.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-volume-mute" viewBox="0 0 16 16">
<path d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06M6 5.04 4.312 6.39A.5.5 0 0 1 4 6.5H2v3h2a.5.5 0 0 1 .312.11L6 10.96zm7.854.606a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 551 B

5
src/assets/volume-up-fill.svg Normal file
View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-volume-up-fill" viewBox="0 0 16 16">
<path d="M11.536 14.01A8.47 8.47 0 0 0 14.026 8a8.47 8.47 0 0 0-2.49-6.01l-.708.707A7.48 7.48 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303z"/>
<path d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.48 5.48 0 0 1 11.025 8a5.48 5.48 0 0 1-1.61 3.89z"/>
<path d="M8.707 11.182A4.5 4.5 0 0 0 10.025 8a4.5 4.5 0 0 0-1.318-3.182L8 5.525A3.5 3.5 0 0 1 9.025 8 3.5 3.5 0 0 1 8 10.475zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 693 B

37
src/main.js
View File

@ -1601,6 +1601,7 @@ class Layer {
this.name = "Layer"
this.frames = [new Frame("keyframe", this.idx+"-F1")]
this.visible = true
this.audible = true
pointerList[this.idx] = this
}
getFrame(num) {
@ -1827,6 +1828,7 @@ class AudioLayer {
} else {
this.name = name
}
this.audible = true
}
copy(idx) {
let newAudioLayer = new AudioLayer(idx.slice(0,8)+this.idx.slice(8), this.name)
@ -2280,6 +2282,9 @@ class GraphicsObject {
get children() {
return this.activeLayer.children
}
get allLayers() {
return [...this.audioLayers, ...this.layers]
}
get currentFrame() {
return this.getFrame(this.currentFrameNum)
}
@ -4083,6 +4088,8 @@ function timeline() {
// Load icons for show/hide layer
timeline_cvs.icons = {}
timeline_cvs.icons.volume_up_fill = new Icon('assets/volume-up-fill.svg');
timeline_cvs.icons.volume_mute = new Icon('assets/volume-mute.svg');
timeline_cvs.icons.eye_fill = new Icon('assets/eye-fill.svg');
timeline_cvs.icons.eye_slash = new Icon('assets/eye-slash.svg');
@ -4215,8 +4222,8 @@ function timeline() {
} else {
mouse.y -= gutterHeight
let l = Math.floor(mouse.y / layerHeight)
if (l < context.activeObject.layers.length) {
let i = context.activeObject.layers.length - (l+1)
if (l < context.activeObject.allLayers.length) {
let i = context.activeObject.allLayers.length - (l+1)
mouse.y -= l*layerHeight
if (
mouse.x > layerWidth - iconSize - 5 &&
@ -4224,7 +4231,16 @@ function timeline() {
mouse.y > 0.5 * (layerHeight - iconSize) &&
mouse.y < 0.5 * (layerHeight + iconSize)
) {
context.activeObject.layers[i].visible = !context.activeObject.layers[i].visible
context.activeObject.allLayers[i].visible = !context.activeObject.allLayers[i].visible
updateUI()
updateMenu()
} else if (
mouse.x > layerWidth - iconSize*2 - 10 &&
mouse.x < layerWidth - iconSize - 5 &&
mouse.y > 0.5 * (layerHeight - iconSize) &&
mouse.y < 0.5 * (layerHeight + iconSize)
) {
context.activeObject.allLayers[i].audible = !context.activeObject.allLayers[i].audible
updateUI()
updateMenu()
} else {
@ -4722,8 +4738,8 @@ function updateLayers() {
ctx.translate(0, -offsetY)
// Draw layer headers
let i=0;
for (let k = context.activeObject.layers.length - 1; k >= 0; k--) {
let layer = context.activeObject.layers[k];
for (let k = context.activeObject.allLayers.length - 1; k >= 0; k--) {
let layer = context.activeObject.allLayers[k];
if (context.activeObject.activeLayer == layer) {
ctx.fillStyle = darkMode ? "#444" : "#ccc"
} else {
@ -4735,6 +4751,8 @@ function updateLayers() {
ctx.save()
const visibilityIcon = layer.visible ? canvas.icons.eye_fill : canvas.icons.eye_slash
visibilityIcon.render(ctx, layerWidth - iconSize - 5, (i+0.5)*layerHeight - iconSize*0.5, iconSize, iconSize, labelColor)
const audibilityIcon = layer.audible ? canvas.icons.volume_up_fill : canvas.icons.volume_mute
audibilityIcon.render(ctx, layerWidth - iconSize*2 - 10, (i+0.5)*layerHeight - iconSize*0.5, iconSize, iconSize, labelColor)
ctx.restore()
ctx.save()
ctx.beginPath()
@ -4747,6 +4765,7 @@ function updateLayers() {
drawBorderedRect(ctx, j*frameWidth, 0, frameWidth, layerHeight, shadow, highlight, shadow, shadow)
}
// Draw existing frames
if (layer instanceof Layer) {
layer.frames.forEach((frame, j) => {
if (!frame) return;
switch (frame.frameType) {
@ -4772,6 +4791,14 @@ function updateLayers() {
break;
}
})
} else if (layer instanceof AudioLayer) {
// TODO: split waveform into chunks
for (let i in layer.sounds) {
let sound = layer.sounds[i]
// layerTrack.appendChild(sound.img)
ctx.drawImage(sound.img, 0,0)
}
}
// if (context.activeObject.currentFrameNum)
ctx.restore()
i++;