From 5c6046ea0aaa13c492ff1f5b7b05ab497b614570 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 17 Feb 2020 23:43:35 +0200
Subject: [PATCH] attempt to fix some bugs with shadows control

---
 .../shadow_control/shadow_control.js          | 47 ++++++++++---------
 1 file changed, 24 insertions(+), 23 deletions(-)

diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
index bdfb4429..f9e7b985 100644
--- a/src/components/shadow_control/shadow_control.js
+++ b/src/components/shadow_control/shadow_control.js
@@ -3,6 +3,17 @@ import OpacityInput from '../opacity_input/opacity_input.vue'
 import { getCssShadow } from '../../services/style_setter/style_setter.js'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
 
+const toModel = (object = {}) => ({
+  x: 0,
+  y: 0,
+  blur: 0,
+  spread: 0,
+  inset: false,
+  color: '#000000',
+  alpha: 1,
+  ...object
+})
+
 export default {
   // 'Value' and 'Fallback' can be undefined, but if they are
   // initially vue won't detect it when they become something else
@@ -15,7 +26,7 @@ export default {
     return {
       selectedId: 0,
       // TODO there are some bugs regarding display of array (it's not getting updated when deleting for some reason)
-      cValue: this.value || this.fallback || []
+      cValue: (this.value || this.fallback || []).map(toModel)
     }
   },
   components: {
@@ -24,12 +35,12 @@ export default {
   },
   methods: {
     add () {
-      this.cValue.push(Object.assign({}, this.selected))
+      this.cValue.push(toModel(this.selected))
       this.selectedId = this.cValue.length - 1
     },
     del () {
       this.cValue.splice(this.selectedId, 1)
-      this.selectedId = this.cValue.length === 0 ? undefined : this.selectedId - 1
+      this.selectedId = this.cValue.length === 0 ? undefined : Math.max(this.selectedId - 1, 0)
     },
     moveUp () {
       const movable = this.cValue.splice(this.selectedId, 1)[0]
@@ -46,34 +57,24 @@ export default {
     this.cValue = this.value || this.fallback
   },
   computed: {
+    anyShadows () {
+      return this.cValue.length > 0
+    },
+    anyShadowsFallback () {
+      return this.fallback.length > 0
+    },
     selected () {
-      if (this.ready && this.cValue.length > 0) {
+      if (this.ready && this.anyShadows) {
         return this.cValue[this.selectedId]
       } else {
-        return {
-          x: 0,
-          y: 0,
-          blur: 0,
-          spread: 0,
-          inset: false,
-          color: '#000000',
-          alpha: 1
-        }
+        return toModel({})
       }
     },
     currentFallback () {
-      if (this.ready && this.fallback.length > 0) {
+      if (this.ready && this.anyShadowsFallback) {
         return this.fallback[this.selectedId]
       } else {
-        return {
-          x: 0,
-          y: 0,
-          blur: 0,
-          spread: 0,
-          inset: false,
-          color: '#000000',
-          alpha: 1
-        }
+        return toModel({})
       }
     },
     moveUpValid () {