From aaee5ef34c8198aec125235f955d760fdfdb8037 Mon Sep 17 00:00:00 2001 From: Mal Date: Tue, 17 Jan 2023 23:13:34 +0100 Subject: [PATCH] Frame deletion implemented --- public/graphics/icon-timer.svg | 73 ++++++++++++++++++++++++++++++++++ public/index.html | 2 +- public/index.js | 64 ++++++++++++++++++++++++++++- public/style.css | 13 +++++- 4 files changed, 148 insertions(+), 4 deletions(-) create mode 100644 public/graphics/icon-timer.svg diff --git a/public/graphics/icon-timer.svg b/public/graphics/icon-timer.svg new file mode 100644 index 0000000..b0ed9b6 --- /dev/null +++ b/public/graphics/icon-timer.svg @@ -0,0 +1,73 @@ + + + + diff --git a/public/index.html b/public/index.html index 42fb06b..e24059d 100644 --- a/public/index.html +++ b/public/index.html @@ -40,7 +40,7 @@ - + diff --git a/public/index.js b/public/index.js index 58e4d6e..b75c5d5 100644 --- a/public/index.js +++ b/public/index.js @@ -102,6 +102,12 @@ const Cube = function (width, depth, height) { this.frames.push(frame); } + this.deleteFrame = function (frameIndex) { + this.frames = this.frames.slice(0, frameIndex).concat( + this.frames.slice(frameIndex + 1) + ); + } + this.switchLed = function (layerIndex, ledIndex) { this.frames[this.currentFrame].layers[layerIndex][ledIndex] = !this.frames[this.currentFrame].layers[layerIndex][ledIndex]; } @@ -158,7 +164,7 @@ const Cube = function (width, depth, height) { led.classList.add('led', 'led-off'); led.addEventListener( - 'click', + 'mousedown', (event) => { const index = y * this.depth + x; const layer = this.height - z - 1; @@ -208,6 +214,7 @@ const FrameMenu = function (id) { this.htmlButtonAddFrameBefore = this.html.querySelector('#button-add-frame-before'); this.htmlButtonAddFrameAfter = this.html.querySelector('#button-add-frame-after'); this.htmlButtonToggleAnimation = this.html.querySelector('#button-toggle-animation'); + this.htmlButtonDeleteFrame = this.html.querySelector('#button-delete-frame'); this.htmlInputDuration = this.html.querySelector('#frame-duration'); this.isAnimationPlaying = false; @@ -252,6 +259,14 @@ const FrameMenu = function (id) { } ); + this.htmlButtonDeleteFrame.addEventListener( + 'click', + () => { + this._decreaseSliderMax(); + this.onFrameDelete(); + } + ); + this.slideToFrame = function (frameIndex) { this.htmlSlider.value = frameIndex + 1; this._updateFramePosition(); @@ -261,6 +276,12 @@ const FrameMenu = function (id) { this.htmlInputDuration.value = duration; } + this.startAnimation = function () { + this.isAnimationPlaying = false; + + this._updateToggleButton(); + } + this.stopAnimation = function () { this.isAnimationPlaying = false; @@ -271,6 +292,8 @@ const FrameMenu = function (id) { this.onFrameAppend = function () {} + this.onFrameDelete = function () {} + this.onSlide = function () {} this.onInputDuration = function () {} @@ -286,6 +309,20 @@ const FrameMenu = function (id) { if (frameNumber > 1) { this.htmlButtonToggleAnimation.disabled = false; } + + this.htmlButtonDeleteFrame.disabled = false; + } + + this._decreaseSliderMax = function () { + const frameNumber = parseInt(this.htmlSlider.max) - 1; + + this.htmlSlider.max = frameNumber; + this.htmlDisplayFrames.innerText = frameNumber; + + if (frameNumber < 2) { + this.htmlButtonToggleAnimation.disabled = true; + this.htmlButtonDeleteFrame.disabled = true; + } } this._updateFramePosition = function () { @@ -301,6 +338,18 @@ const FrameMenu = function (id) { this.htmlButtonToggleAnimation.classList.add('icon-button-play'); this.htmlButtonToggleAnimation.classList.remove('icon-button-stop'); } + + const elements = [ + this.htmlSlider, + this.htmlButtonAddFrameAfter, + this.htmlButtonAddFrameBefore, + this.htmlInputDuration, + this.htmlButtonDeleteFrame, + ]; + + for (const element of elements) { + element.disabled = this.isAnimationPlaying; + } } } @@ -382,5 +431,18 @@ frameMenu.onToggleAnimation = (isPlaying) => { for (const frame of ANIMATION_FRAME_QUEUE) { clearTimeout(frame); } + + frameMenu.stopAnimation(); } +} +frameMenu.onFrameDelete = () => { + if (cube.frames.length < 2) { + return; + } + + cube.deleteFrame(cube.currentFrame); + cube.currentFrame--; + cube.currentFrame = cube.currentFrame < 0 ? 0 : cube.currentFrame; + + frameMenu.slideToFrame(cube.currentFrame); } \ No newline at end of file diff --git a/public/style.css b/public/style.css index 35ea6ec..8ed8bf4 100644 --- a/public/style.css +++ b/public/style.css @@ -79,6 +79,10 @@ button:disabled { background-image: url("graphics/icon-delete.svg"); } +.icon-button-timer { + background-image: url("graphics/icon-timer.svg"); +} + button:hover { background-color: #3765ff; } @@ -158,6 +162,10 @@ button:hover { width: 80px; } +.selector { + position: relative; +} + .selector-title { margin-bottom: 10px; font-weight: bold; @@ -185,10 +193,11 @@ button:hover { .selector-items { border-radius: 0 0 10px 10px; - position: relative; + position: absolute; background-color: black; - top: -8px; + top: 68px; padding: 0; + width: 100%; } .selector-item {