From 8c6418c39e003ef7cfd6d33ad54527c8952992cb Mon Sep 17 00:00:00 2001
From: Mawoka <git@mawoka.eu>
Date: Fri, 4 Aug 2023 09:30:27 +0200
Subject: [PATCH] :bug: Closes #269

---
 .../src/lib/editor/slides/edit_menu.svelte    | 128 +++++++++---------
 1 file changed, 66 insertions(+), 62 deletions(-)

diff --git a/frontend/src/lib/editor/slides/edit_menu.svelte b/frontend/src/lib/editor/slides/edit_menu.svelte
index 7b5cc2f..aee85d4 100644
--- a/frontend/src/lib/editor/slides/edit_menu.svelte
+++ b/frontend/src/lib/editor/slides/edit_menu.svelte
@@ -4,7 +4,7 @@ SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
 SPDX-License-Identifier: MPL-2.0
 -->
 
-<script lang="ts">
+<script lang='ts'>
 	import type { Konva, ShapeModel } from 'pikaso';
 	import { fade } from 'svelte/transition';
 
@@ -23,8 +23,12 @@ SPDX-License-Identifier: MPL-2.0
 			case 'label':
 				available_modifiers.push('font_size', 'text_color');
 				break;
-			case 'circle' || 'rectangle':
+			case 'circle':
 				available_modifiers.push('fill_color');
+				break;
+			case 'rect':
+				available_modifiers.push("fill_color");
+				break;
 		}
 	};
 
@@ -63,11 +67,11 @@ SPDX-License-Identifier: MPL-2.0
 	}
 </script>
 
-<div class="flex flex-row justify-evenly z-40">
+<div class='flex flex-row justify-evenly z-40'>
 	<div>
 		<button
-			type="button"
-			class="disabled:opacity-50 transition"
+			type='button'
+			class='disabled:opacity-50 transition'
 			disabled={!(
 				available_modifiers.includes('fill_color') ||
 				available_modifiers.includes('text_color')
@@ -78,35 +82,35 @@ SPDX-License-Identifier: MPL-2.0
 		>
 			<!-- iconoir/color-picker -->
 			<svg
-				class="w-6 h-6"
-				stroke-width="2"
-				viewBox="0 0 24 24"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-				color="currentColor"
+				class='w-6 h-6'
+				stroke-width='2'
+				viewBox='0 0 24 24'
+				fill='none'
+				xmlns='http://www.w3.org/2000/svg'
+				color='currentColor'
 			>
 				<path
-					d="M7 13.161l5.464-5.464a1 1 0 011.415 0l2.12 2.12a1 1 0 010 1.415l-1.928 1.929m-7.071 0l-2.172 2.172a.999.999 0 00-.218.327l-1.028 2.496c-.508 1.233.725 2.466 1.958 1.959l2.497-1.028c.122-.05.233-.125.326-.218l5.708-5.708m-7.071 0h7.071M13.878 3.454l2.121 2.121m4.243 4.243l-2.121-2.121m-2.122-2.122l1.414-1.414a1 1 0 011.415 0l.707.707a1 1 0 010 1.414L18.12 7.697m-2.122-2.122l2.122 2.122"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
+					d='M7 13.161l5.464-5.464a1 1 0 011.415 0l2.12 2.12a1 1 0 010 1.415l-1.928 1.929m-7.071 0l-2.172 2.172a.999.999 0 00-.218.327l-1.028 2.496c-.508 1.233.725 2.466 1.958 1.959l2.497-1.028c.122-.05.233-.125.326-.218l5.708-5.708m-7.071 0h7.071M13.878 3.454l2.121 2.121m4.243 4.243l-2.121-2.121m-2.122-2.122l1.414-1.414a1 1 0 011.415 0l.707.707a1 1 0 010 1.414L18.12 7.697m-2.122-2.122l2.122 2.122'
+					stroke='currentColor'
+					stroke-width='2'
+					stroke-linecap='round'
+					stroke-linejoin='round'
 				/>
 			</svg>
 		</button>
 		{#if opened_dropdown === 'color'}
 			<div
-				class="bg-white m-auto rounded-lg shadow-lg p-4 dark:bg-gray-600 h-fit gap-2 w-fit auto-cols-min flex absolute z-40"
+				class='bg-white m-auto rounded-lg shadow-lg p-4 dark:bg-gray-600 h-fit gap-2 w-fit auto-cols-min flex absolute z-40'
 				transition:fade={{ duration: 100 }}
 			>
-				<input type="color" on:change={change_color} />
+				<input type='color' on:change={change_color} />
 			</div>
 		{/if}
 	</div>
 	<div>
 		<button
-			type="button"
-			class="disabled:opacity-50 transition"
+			type='button'
+			class='disabled:opacity-50 transition'
 			on:click={() => {
 				toggle_switch('font_size');
 			}}
@@ -114,41 +118,41 @@ SPDX-License-Identifier: MPL-2.0
 		>
 			<!-- iconoir/font-size -->
 			<svg
-				class="w-6 h-6"
-				stroke-width="2"
-				viewBox="0 0 24 24"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-				color="currentColor"
+				class='w-6 h-6'
+				stroke-width='2'
+				viewBox='0 0 24 24'
+				fill='none'
+				xmlns='http://www.w3.org/2000/svg'
+				color='currentColor'
 			>
 				<path
-					d="M18 21V11m0 10l-2-2.5m2 2.5l2-2.5M18 11l-2 2m2-2l2 2M9 5v12m0 0H7m2 0h2M15 7V5H3v2"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
+					d='M18 21V11m0 10l-2-2.5m2 2.5l2-2.5M18 11l-2 2m2-2l2 2M9 5v12m0 0H7m2 0h2M15 7V5H3v2'
+					stroke='currentColor'
+					stroke-width='2'
+					stroke-linecap='round'
+					stroke-linejoin='round'
 				/>
 			</svg>
 		</button>
 		{#if opened_dropdown === 'font_size'}
 			<div
-				class="bg-white m-auto rounded-lg shadow-lg p-4 dark:bg-gray-600 h-fit gap-2 w-fit auto-cols-min flex absolute z-40"
+				class='bg-white m-auto rounded-lg shadow-lg p-4 dark:bg-gray-600 h-fit gap-2 w-fit auto-cols-min flex absolute z-40'
 				transition:fade={{ duration: 100 }}
 			>
 				<input
-					type="range"
+					type='range'
 					on:change={change_fontsize}
 					value={selected_el?.node?.children?.[1]?.attrs?.fontSize}
-					min="10"
-					max="250"
+					min='10'
+					max='250'
 				/>
 			</div>
 		{/if}
 	</div>
-	<div class="flex flex-row gap-2">
+	<div class='flex flex-row gap-2'>
 		<button
-			type="button"
-			class="disabled:opacity-50 transition"
+			type='button'
+			class='disabled:opacity-50 transition'
 			on:click={() => {
 				selected_el.update({ zIndex: selected_el.node.getZIndex() + 1 });
 			}}
@@ -156,25 +160,25 @@ SPDX-License-Identifier: MPL-2.0
 		>
 			<!-- iconoir/priority-up -->
 			<svg
-				class="w-6 h-6"
-				stroke-width="2"
-				viewBox="0 0 24 24"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-				color="currentColor"
+				class='w-6 h-6'
+				stroke-width='2'
+				viewBox='0 0 24 24'
+				fill='none'
+				xmlns='http://www.w3.org/2000/svg'
+				color='currentColor'
 			>
 				<path
-					d="M11.576 1.424a.6.6 0 01.848 0l10.152 10.152a.6.6 0 010 .848L12.424 22.576a.6.6 0 01-.848 0L1.424 12.424a.6.6 0 010-.848L11.576 1.424zM12 7l4 4m-4-4l-4 4.167M12 7v9"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
+					d='M11.576 1.424a.6.6 0 01.848 0l10.152 10.152a.6.6 0 010 .848L12.424 22.576a.6.6 0 01-.848 0L1.424 12.424a.6.6 0 010-.848L11.576 1.424zM12 7l4 4m-4-4l-4 4.167M12 7v9'
+					stroke='currentColor'
+					stroke-width='2'
+					stroke-linecap='round'
+					stroke-linejoin='round'
 				/>
 			</svg>
 		</button>
 		<button
-			type="button"
-			class="disabled:opacity-50 transition"
+			type='button'
+			class='disabled:opacity-50 transition'
 			on:click={() => {
 				selected_el.update({ zIndex: selected_el.node.getZIndex() - 1 });
 			}}
@@ -182,19 +186,19 @@ SPDX-License-Identifier: MPL-2.0
 		>
 			<!-- iconoir/priority-down -->
 			<svg
-				class="w-6 h-6"
-				stroke-width="2"
-				viewBox="0 0 24 24"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-				color="currentColor"
+				class='w-6 h-6'
+				stroke-width='2'
+				viewBox='0 0 24 24'
+				fill='none'
+				xmlns='http://www.w3.org/2000/svg'
+				color='currentColor'
 			>
 				<path
-					d="M11.576 1.424a.6.6 0 01.848 0l10.152 10.152a.6.6 0 010 .848L12.424 22.576a.6.6 0 01-.848 0L1.424 12.424a.6.6 0 010-.848L11.576 1.424zM12 16l4-4m-4 4l-4-4.167M12 16V7"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
+					d='M11.576 1.424a.6.6 0 01.848 0l10.152 10.152a.6.6 0 010 .848L12.424 22.576a.6.6 0 01-.848 0L1.424 12.424a.6.6 0 010-.848L11.576 1.424zM12 16l4-4m-4 4l-4-4.167M12 16V7'
+					stroke='currentColor'
+					stroke-width='2'
+					stroke-linecap='round'
+					stroke-linejoin='round'
 				/>
 			</svg>
 		</button>