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

Add layer names

This commit is contained in:
Skyler Lehmkuhl 2024-12-19 20:14:08 -05:00
parent 6978c619d5
commit 2d9ced4785
2 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/main.js
View File

@ -3,7 +3,7 @@ import * as fitCurve from '/fit-curve.js';
import { Bezier } from "/bezier.js";
import { Quadtree } from './quadtree.js';
import { createNewFileDialog, showNewFileDialog, closeDialog } from './newfile.js';
import { titleCase, getMousePositionFraction, getKeyframesSurrounding, invertPixels, lerpColor, lerp, camelToWords, generateWaveform, floodFillRegion, getShapeAtPoint, hslToRgb, drawCheckerboardBackground, hexToHsl, hsvToRgb, hexToHsv, rgbToHex, clamp, drawBorderedRect, drawCenteredText } from './utils.js';
import { titleCase, getMousePositionFraction, getKeyframesSurrounding, invertPixels, lerpColor, lerp, camelToWords, generateWaveform, floodFillRegion, getShapeAtPoint, hslToRgb, drawCheckerboardBackground, hexToHsl, hsvToRgb, hexToHsv, rgbToHex, clamp, drawBorderedRect, drawCenteredText, drawHorizontallyCenteredText } from './utils.js';
import { backgroundColor, darkMode, foregroundColor, frameWidth, gutterHeight, highlight, layerHeight, layerWidth, scrubberColor, shade, shadow } from './styles.js';
const { writeTextFile: writeTextFile, readTextFile: readTextFile, writeFile: writeFile, readFile: readFile }= window.__TAURI__.fs;
const {
@ -3974,6 +3974,7 @@ function updateLayers() {
ctx.rect(layerWidth,0,width-layerWidth,height)
ctx.clip()
ctx.translate(layerWidth - offsetX, 0)
ctx.fillStyle = darkMode ? "white" : "black"
for (let j=Math.floor(offsetX / (5 * frameWidth)) * 5; j<frameCount + 1; j+=5) {
drawCenteredText(ctx, j.toString(), (j-0.5)*frameWidth, gutterHeight/2, gutterHeight)
}
@ -3994,6 +3995,8 @@ function updateLayers() {
ctx.fillStyle = darkMode ? "#222" : "#aaa"
}
drawBorderedRect(ctx, 0, i*layerHeight, layerWidth, layerHeight, highlight, shadow)
ctx.fillStyle = darkMode ? "white": "black"
drawHorizontallyCenteredText(ctx, layer.name, 5, (i+0.5)*layerHeight, layerHeight*0.4)
ctx.save()
ctx.beginPath()
ctx.rect(layerWidth, i*layerHeight,width,layerHeight)
@ -4009,7 +4012,7 @@ function updateLayers() {
switch (frame.frameType) {
case "keyframe":
ctx.fillStyle = foregroundColor
drawBorderedRect(ctx, j*frameWidth, 0, frameWidth, layerHeight, highlight, shadow, backgroundColor, backgroundColor)
drawBorderedRect(ctx, j*frameWidth, 0, frameWidth, layerHeight, highlight, shadow, shadow, shadow)
ctx.fillStyle = "#111"
ctx.beginPath()
ctx.arc((j+0.5)*frameWidth, layerHeight*0.75, frameWidth*0.25, 0, 2*Math.PI)
@ -4052,10 +4055,12 @@ function updateLayers() {
ctx.beginPath()
ctx.fillStyle = scrubberColor
ctx.fillRect(frameNum * frameWidth, -gutterHeight, frameWidth, gutterHeight)
ctx.fillStyle = "white"
drawCenteredText(ctx, (frameNum+1).toString(), (frameNum + 0.5) * frameWidth, -gutterHeight/2, gutterHeight)
ctx.restore()
ctx.restore()
}
return
for (let container of document.querySelectorAll(".layers-container")) {
let layerspanel = container.querySelectorAll(".layers")[0]
let framescontainer = container.querySelectorAll(".frames-container")[0]

14
src/utils.js
View File

@ -580,8 +580,7 @@ function drawBorderedRect(ctx, x, y, width, height, top, bottom, left, right) {
}
function drawCenteredText(ctx, text, x, y, height) {
// Set the font size and family based on the 'height' parameter
ctx.font = `${height}px Arial`; // You can customize the font style if needed
ctx.font = `${height}px Arial`; // TODO: allow configuring font somewhere
// Calculate the width of the text
const textWidth = ctx.measureText(text).width;
@ -591,10 +590,16 @@ function drawCenteredText(ctx, text, x, y, height) {
const centerY = y + height / 4; // Adjust for vertical centering
// Draw the text centered at (x, y) with the specified font size
ctx.fillStyle = 'black'; // Set the color for the text
ctx.fillText(text, centerX, centerY);
}
function drawHorizontallyCenteredText(ctx, text, x, y, height) {
ctx.font = `${height}px Arial`; // TODO: allow configuring font somewhere
const centerY = y + height / 4; // Adjust for vertical centering
ctx.fillText(text, x, centerY);
}
export {
titleCase,
getMousePositionFraction,
@ -614,5 +619,6 @@ export {
drawCheckerboardBackground,
clamp,
drawBorderedRect,
drawCenteredText
drawCenteredText,
drawHorizontallyCenteredText
};