Adding rules now works

src/components/settings_modal/tabs/style_tab/style_tab.js

@@ -1,5 +1,5 @@
 import { ref, reactive, computed, watch } from 'vue'
-import { get } from 'lodash'
+import { get, set } from 'lodash'
 
 import Select from 'src/components/select/select.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
@@ -17,7 +17,12 @@ import { getCssRules } from 'src/services/theme_data/css_utils.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faFloppyDisk, faFolderOpen, faFile } from '@fortawesome/free-solid-svg-icons'
 
-const toValue = (x) => JSON.parse(JSON.stringify(x === undefined ? '"lol"' : x))
+// helper for debugging
+// eslint-disable-next-line no-unused-vars
+const toValue = (x) => JSON.parse(JSON.stringify(x === undefined ? 'null' : x))
+
+// helper to make states comparable
+const normalizeStates = (states) => ['normal', ...(states?.filter(x => x !== 'normal') || [])].join(':')
 
 library.add(
   faFile,
@@ -95,11 +100,8 @@ export default {
     const selectedComponentVariantsAll = computed(() => {
       return Object.keys({ normal: null, ...(selectedComponent.value.variants || {}) })
     })
-    // const selectedComponentVariants = computed(() => {
-    //   return selectedComponentVariantsAll.value.filter(x => x !== 'normal')
-    // })
 
-    const selectedStates = reactive(new Set())
+    const selectedState = reactive(new Set())
     const selectedComponentStatesAll = computed(() => {
       return Object.keys({ normal: null, ...(selectedComponent.value.states || {}) })
     })
@@ -137,8 +139,8 @@ export default {
       if (!!selectedComponent.value.variants?.normal || selectedVariant.value !== 'normal') {
         selectors.push(selectedComponent.value.variants[selectedVariant.value])
       }
-      if (selectedStates.size > 0) {
+      if (selectedState.size > 0) {
-        selectedStates.forEach(state => {
+        selectedState.forEach(state => {
           const original = selectedComponent.value.states[state]
           selectors.push(simulatePseudoSelectors(original))
         })
@@ -151,104 +153,119 @@ export default {
       return scoped.join('\n')
     })
 
-    // Rules stuff
+    // Rules stuff aka meat and potatoes
-    const selectedComponentRulesList = reactive([])
+    const editorFriendlyFallbackStructure = computed(() => {
-    const selectedComponentRulesObject = computed(() => {
+      const root = {}
-      const result = {}
-      selectedComponentRulesList.forEach(
-        (rule) => {
-          const component = rule.component
-          const { variant = 'normal', state = [] } = rule
-          result[component] = result[component] || {}
-          result[component][variant] = result[component][variant] || {}
-          result[component][variant][state.join(':')] = rule
-        }
-      )
-      return result
-    })
 
-    // Edited rule
+      componentKeys.forEach((componentKey) => {
-    const editedRuleFallback = computed(() => {
+        const componentValue = componentsMap.get(componentKey)
-      const component = selectedComponentName.value
+        const { defaultRules } = componentValue
-      const variant = selectedVariant.value
+        defaultRules.forEach((rule) => {
-      const states = ['normal', ...selectedStates.keys()].join(':')
+          const { parent: rParent } = rule
-      return selectedComponentRulesObject.value[component]?.[variant]?.[states]
+          const parent = rParent ?? rule
-    })
+          const hasChildren = !!rParent
+          const child = hasChildren ? rule : null
 
-    const editedSubrulesFallback = computed(() => {
+          const {
-      const parentComponent = selectedComponentName.value
+            component: pComponent,
+            variant: pVariant = 'normal',
+            state: pState = [] // no relation to Intel CPUs whatsoever
+          } = parent
 
-      const subrules = {}
+          const pPath = `${pComponent}.${pVariant}.${normalizeStates(pState)}`
-      selectedComponentRulesList.forEach(sr => {
-        console.log('SR', toValue(sr))
-        if (!sr.parent) return
-        if (sr.parent.component === parentComponent) {
-          const component = sr.component
-          const { variant = 'normal', state = [] } = sr
 
-          subrules[component] = {} || subrules[component]
+          let output = get(root, pPath)
-          subrules[component][variant] = {} || subrules[component][variant]
+          if (!output) {
-          subrules[component][variant][state.join(':')] = sr
+            set(root, pPath, {})
-        }
+            output = get(root, pPath)
+          }
+
+          if (hasChildren) {
+            output._children = output._children ?? {}
+            const {
+              component: cComponent,
+              variant: cVariant = 'normal',
+              state: cState = [],
+              directives
+            } = child
+
+            const cPath = `${cComponent}.${cVariant}.${normalizeStates(cState)}`
+            set(output._children, cPath, directives)
+          }
+        })
       })
 
-      return subrules
+      return root
     })
 
+    // All rules that are made by editor
+    const allEditedRules = reactive({})
+
     const componentHas = (subComponent) => {
       return !!selectedComponent.value.validInnerComponents?.find(x => x === subComponent)
     }
 
-    const editedTextColor = computed(() => get(
+    const getPath = (component, directive) => {
-      editedSubrulesFallback.value,
+      const pathSuffix = component ? `._children.${component}.normal.normal` : ''
-      'Text.normal.normal.directives.textColor',
+      const path = `${selectedComponentName.value}.${selectedVariant.value}.${normalizeStates([...selectedState])}${pathSuffix}.directives.${directive}`
-      null
+      return path
-    ))
+    }
-
+    const isElementPresent = (component, directive, defaultValue = '') => computed({
-    const editedLinkColor = computed(() => get(
+      get () {
-      editedSubrulesFallback.value,
+        return get(allEditedRules, getPath(component, directive)) != null
-      'Link.normal.normal.directives.linkColor',
+      },
-      null
+      set (value) {
-    ))
+        if (value) {
-
+          set(allEditedRules, getPath(component, directive), defaultValue)
-    const editedIconColor = computed(() => get(
+        } else {
-      editedSubrulesFallback.value,
+          set(allEditedRules, getPath(component, directive), null)
-      'Icon.normal.normal.directives.iconColor',
+        }
-      null
+      }
-    ))
-
-    const editedBackground = computed(() => get(
-      editedRuleFallback.value,
-      'directives.background',
-      null
-    ))
-
-    const editedOpacity = computed(() => get(
-      editedSubrulesFallback.value,
-      'Link.normal.normal.directives.linkColor',
-      null
-    ))
-
-    const editedShadow = computed(() => {
-      return editedRuleFallback.value?.directives.shadow
     })
 
+    const getEditedElement = (component, directive) => computed({
+      get () {
+        let usedRule
+        const fallback = editorFriendlyFallbackStructure
+        const real = allEditedRules
+        const path = getPath(component, directive)
+
+        usedRule = get(real, path) // get real
+        if (!usedRule) {
+          console.log('FALLBACK')
+          usedRule = get(fallback, path)
+        } else {
+          console.log('REAL')
+        }
+
+        console.log('GET', path, toValue(usedRule))
+
+        return usedRule
+      },
+      set (value) {
+        console.log(1, toValue(allEditedRules))
+        set(allEditedRules, getPath(component, directive))
+        console.log(2, toValue(allEditedRules))
+      }
+    })
+
+    const editedBackgroundColor = getEditedElement(null, 'background')
+    const editedOpacity = getEditedElement(null, 'opacity')
+    const editedTextColor = getEditedElement('Text', 'color')
+    const editedLinkColor = getEditedElement('Link', 'color')
+    const editedIconColor = getEditedElement('Icon', 'color')
+    const editedShadow = getEditedElement(null, 'shadow')
+
+    const isBackgroundColorPresent = isElementPresent(null, 'background', '#FFFFFF')
+    const isOpacityPresent = isElementPresent(null, 'opacity', 1)
+    const isTextColorPresent = isElementPresent('Text', 'color', '#000000')
+    const isLinkColorPresent = isElementPresent('Link', 'color', '#000080')
+    const isIconColorPresent = isElementPresent('Icon', 'color', '#909090')
+    const isShadowPresent = isElementPresent(null, 'shadow', [{ x: 0, y: 0, blur: 0, color: '#000000' }])
+
     const updateSelectedComponent = () => {
       selectedVariant.value = 'normal'
-      selectedStates.clear()
+      selectedState.clear()
-
-      const processedRulesList = selectedComponent.value.defaultRules.map(r => {
-        const rule = {
-          component: selectedComponentName.value,
-          variant: 'normal',
-          ...r,
-          state: ['normal', ...(r.state || []).filter(x => x !== 'normal')]
-        }
-        return rule
-      })
-
-      selectedComponentRulesList.splice(0, selectedComponentRulesList.length)
-      selectedComponentRulesList.push(...processedRulesList)
 
       previewRules.splice(0, previewRules.length)
       previewRules.push(...init({
@@ -289,24 +306,27 @@ export default {
       selectedComponentKey,
       selectedComponentVariantsAll,
       selectedComponentStates,
-      selectedComponentRulesObject,
       selectedVariant,
-      selectedStates,
+      selectedState,
       updateSelectedStates (state, v) {
         if (v) {
-          selectedStates.add(state)
+          selectedState.add(state)
         } else {
-          selectedStates.delete(state)
+          selectedState.delete(state)
         }
       },
-      editedRuleFallback,
+      editedBackgroundColor,
-      editedSubrulesFallback,
-      editedBackground,
       editedOpacity,
       editedTextColor,
       editedLinkColor,
       editedIconColor,
       editedShadow,
+      isBackgroundColorPresent,
+      isOpacityPresent,
+      isTextColorPresent,
+      isLinkColorPresent,
+      isIconColorPresent,
+      isShadowPresent,
       previewCss,
       previewClass,
       editorHintStyle,

src/components/settings_modal/tabs/style_tab/style_tab.vue

@@ -100,7 +100,7 @@
           class="state-selector-list"
           >
           <li
-            v-for="state in selectedComponentStates"
+            v-for="state in selectedStates"
             :key="'component-variant-' + state"
             >
             <Checkbox
@@ -139,13 +139,13 @@
           key="main"
         >
           <ColorInput
-            v-model="editedBackground"
+            v-model="editedBackgroundColor"
-            :disabled="!editedBackgroundPresent"
+            :disabled="!isBackgroundColorPresent"
             :label="$t('settings.style.themes3.editor.background')"
           />
           <Popover trigger="hover">
             <template #trigger>
-              <Checkbox v-model="editedBackgroundPresent" />
+              <Checkbox v-model="isBackgroundColorPresent" />
             </template>
             <template #content>
               {{ $t('settings.style.themes3.editor.include_in_rule') }}
@@ -153,12 +153,12 @@
           </Popover>
           <OpacityInput
             v-model="editedOpacity"
-            :disabled="!editedOpacityPresent"
+            :disabled="!isOpacityPresent"
            :label="$t('settings.style.themes3.editor.opacity')"
           />
           <Popover trigger="hover">
             <template #trigger>
-              <Checkbox v-model="editedOpacityPresent" />
+              <Checkbox v-model="isOpacityPresent" />
             </template>
             <template #content>
               {{ $t('settings.style.themes3.editor.include_in_rule') }}
@@ -167,7 +167,7 @@
           <ColorInput
             v-model="editedTextColor"
             :label="$t('settings.style.themes3.editor.text_color')"
-            :disabled="!editedTextPresent"
+            :disabled="!isTextColorPresent"
             v-if="componentHas('Text')"
           />
           <Popover
@@ -175,7 +175,7 @@
             v-if="componentHas('Text')"
           >
             <template #trigger>
-              <Checkbox v-model="editedTextPresent" />
+              <Checkbox v-model="isTextColorPresent" />
             </template>
             <template #content>
               {{ $t('settings.style.themes3.editor.include_in_rule') }}
@@ -184,7 +184,7 @@
           <ColorInput
             v-model="editedLinkColor"
             :label="$t('settings.style.themes3.editor.link_color')"
-            :disabled="!editedLinkPresent"
+            :disabled="!isLinkColorPresent"
             v-if="componentHas('Link')"
           />
           <Popover
@@ -192,7 +192,7 @@
             v-if="componentHas('Link')"
           >
             <template #trigger>
-              <Checkbox v-model="editedLinkPresent" />
+              <Checkbox v-model="isLinkColorPresent" />
             </template>
             <template #content>
               {{ $t('settings.style.themes3.editor.include_in_rule') }}
@@ -201,7 +201,7 @@
           <ColorInput
             v-model="editedIconColor"
             :label="$t('settings.style.themes3.editor.icon_color')"
-            :disabled="!editedOpacityPresent"
+            :disabled="!isIconColorPresent"
             v-if="componentHas('Icon')"
           />
           <Popover
@@ -209,7 +209,7 @@
             v-if="componentHas('Icon')"
           >
             <template #trigger>
-              <Checkbox v-model="editedIconPresent" />
+              <Checkbox v-model="isIconColorPresent" />
             </template>
             <template #content>
               {{ $t('settings.style.themes3.editor.include_in_rule') }}
@@ -223,15 +223,15 @@
         >
           <Checkbox
             class="style-control"
-            v-model="editedOpacityPresent"
+            v-model="isShadowPresent"
           >
             {{ $t('settings.style.themes3.editor.include_in_rule') }}
           </checkbox>
           <ShadowControl
             v-model="editedShadow"
+            :disabled="isShadowPresent"
             :no-preview="true"
             :separate-inset="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'"
-            :fallback="currentShadowFallback"
           />
         </div>
       </tab-switcher>