Frame deletion implemented

public/graphics/icon-timer.svg

@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="109.09324mm"
+   height="135.48544mm"
+   viewBox="0 0 109.09324 135.48544"
+   version="1.1"
+   id="svg615"
+   xml:space="preserve"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="icon-timer.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview617"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="0.52850974"
+     inkscape:cx="256.38127"
+     inkscape:cy="317.87494"
+     inkscape:window-width="1845"
+     inkscape:window-height="1011"
+     inkscape:window-x="75"
+     inkscape:window-y="32"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" /><defs
+     id="defs612" /><g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-38.851903,-50.14629)"><circle
+       style="fill:none;stroke:#ffffff;stroke-width:16.065;stroke-linecap:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="path389"
+       cx="93.398521"
+       cy="131.08511"
+       r="46.514118" /><rect
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:16.065;stroke-linecap:round;stroke-dasharray:none;stroke-dashoffset:0"
+       id="rect1157"
+       width="20.364386"
+       height="19.634676"
+       x="83.216331"
+       y="64.936317" /><rect
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:16.065;stroke-linecap:round;stroke-dasharray:none;stroke-dashoffset:0"
+       id="rect1263"
+       width="49.36359"
+       height="18.514835"
+       x="68.716728"
+       y="50.14629"
+       ry="9.2574177" /><rect
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:16.065;stroke-linecap:round;stroke-dasharray:none;stroke-dashoffset:0"
+       id="rect2717"
+       width="13.134775"
+       height="32.214455"
+       x="86.676254"
+       y="104.69147"
+       ry="6.5673876" /><rect
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:16.065;stroke-linecap:round;stroke-dasharray:none;stroke-dashoffset:0"
+       id="rect2717-3"
+       width="13.134775"
+       height="32.214455"
+       x="-62.562675"
+       y="144.46172"
+       ry="6.5673876"
+       transform="rotate(-55.607208)" /></g></svg>

public/index.html

@@ -40,7 +40,7 @@
                 <input type="number" id="frame-duration" class="suffix suffix-ms" min="1" step="1" max="65355" value="100" title="Frame-Dauer (ms)">
 
                 <button id="button-add-frame-after" title="Frame danach hinzufügen">+</button>
-                <button id="button-delete-frame" class="icon-button icon-button-delete" title="Frame löschen"></button>
+                <button id="button-delete-frame" class="icon-button icon-button-delete" title="Frame löschen" disabled></button>
             </div>
         </div>
     </body>

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);
+}

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 {