Frame deletion implemented

2023-01-17 23:13:34 +01:00 · 2023-01-17 23:13:34 +01:00 · aaee5ef34c
parent 018142d257
commit aaee5ef34c
4 changed files with 148 additions and 4 deletions
--- a/public/graphics/icon-timer.svg
+++ b/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>
--- a/public/index.html
+++ b/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>
--- 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);
 }
--- 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 {