qugalet/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

use draft logic for virtualDirective to catch errors

Browse source
This commit is contained in:
Henry Jameson 2024-10-18 13:43:33 +03:00
parent 21b17f333d
commit f4d29b5d5e
6 changed files with 76 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/select/select_motion.vue
View file

@ -4,7 +4,7 @@
>
<button
class="btn button-default"
:disabled="disabled || shadowsAreNull"
:disabled="disabled"
@click="add"
>
<FAIcon

59
src/components/settings_modal/tabs/style_tab/style_tab.js
View file

@ -21,7 +21,7 @@ import {
getScopedVersion
} from 'src/services/theme_data/css_utils.js'
import { serializeShadow, serialize } from 'src/services/theme_data/iss_serializer.js'
import { parseShadow, deserialize } from 'src/services/theme_data/iss_deserializer.js'
import { deserializeShadow, deserialize } from 'src/services/theme_data/iss_deserializer.js'
import {
rgb2hex,
hex2rgb,
@ -371,7 +371,11 @@ export default {
return shadow
}
if (typeof shadow === 'string') {
return parseShadow(shadow)
try {
return deserializeShadow(shadow)
} catch (e) {
console.warn(e)
}
}
return null
})
@ -580,6 +584,7 @@ export default {
const selectedVirtualDirectiveId = ref(0)
exports.selectedVirtualDirectiveId = selectedVirtualDirectiveId
const selectedVirtualDirective = computed({
get () {
return virtualDirectives[selectedVirtualDirectiveId.value]
@ -589,6 +594,7 @@ export default {
}
})
exports.selectedVirtualDirective = selectedVirtualDirective
exports.selectedVirtualDirectiveValType = computed({
get () {
return virtualDirectives[selectedVirtualDirectiveId.value].valType
@ -607,35 +613,56 @@ export default {
}
}
})
exports.selectedVirtualDirectiveParsed = computed({
get () {
switch (selectedVirtualDirective.value.valType) {
const draftVirtualDirectiveValid = ref(true)
const draftVirtualDirective = ref({})
exports.draftVirtualDirective = draftVirtualDirective
watch(
selectedVirtualDirective,
(directive) => {
switch (directive.valType) {
case 'shadow': {
const directiveValue = selectedVirtualDirective.value.value
if (Array.isArray(directiveValue)) {
return normalizeShadows(directiveValue)
if (Array.isArray(directive.value)) {
draftVirtualDirective.value = normalizeShadows(directive.value)
} else {
const splitShadow = directiveValue.split(/,/g).map(x => x.trim())
return normalizeShadows(splitShadow)
const splitShadow = directive.value.split(/,/g).map(x => x.trim())
draftVirtualDirective.value = normalizeShadows(splitShadow)
}
break
}
case 'color':
return selectedVirtualDirective.value.value
draftVirtualDirective.value = directive.value
break
default:
return selectedVirtualDirective.value.value
draftVirtualDirective.value = directive.value
break
}
},
set (value) {
{ immediate: true }
)
watch(
draftVirtualDirective,
(directive) => {
try {
switch (selectedVirtualDirective.value.valType) {
case 'shadow': {
virtualDirectives[selectedVirtualDirectiveId.value].value = value.map(x => serializeShadow(x)).join(', ')
virtualDirectives[selectedVirtualDirectiveId.value].value =
directive.map(x => serializeShadow(x)).join(', ')
break
}
default:
virtualDirectives[selectedVirtualDirectiveId.value].value = value
virtualDirectives[selectedVirtualDirectiveId.value].value = directive
}
draftVirtualDirectiveValid.value = true
} catch (e) {
console.error('Invalid virtual directive value', e)
draftVirtualDirectiveValid.value = false
}
})
},
{ immediate: true }
)
exports.getNewVirtualDirective = () => ({
name: 'newDirective',

10
src/components/settings_modal/tabs/style_tab/style_tab.vue
View file

@ -285,7 +285,7 @@
:disabled="!isShadowPresent"
:no-preview="true"
:compact="true"
:separate-inset="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'"
:compute-color="computeColor"
@subShadowSelected="onSubShadow"
/>
</div>
@ -408,14 +408,14 @@
</div>
<ShadowControl
v-if="selectedVirtualDirectiveValType === 'shadow'"
v-model="selectedVirtualDirectiveParsed"
:computeColor="computeColor"
v-model="draftVirtualDirective"
:compute-color="computeColor"
:compact="true"
/>
<ColorInput
v-if="selectedVirtualDirectiveValType === 'color'"
v-model="selectedVirtualDirectiveParsed"
:fallback="computeColor(selectedVirtualDirectiveParsed)"
v-model="draftVirtualDirective"
:fallback="computeColor(draftVirtualDirective)"
:label="$t('settings.style.themes3.editor.variables.virtual_color')"
/>
</div>

18
src/services/theme_data/iss_deserializer.js
View file

@ -1,10 +1,11 @@
import { flattenDeep } from 'lodash'
export const parseShadow = string => {
const modes = ['_full', 'inset', 'x', 'y', 'blur', 'spread', 'color', 'alpha']
export const deserializeShadow = string => {
const modes = ['_full', 'inset', 'x', 'y', 'blur', 'spread', 'color', 'alpha', 'name']
const regexPrep = [
// inset keyword (optional)
'^(?:(inset)\\s+)?',
'^',
'(?:(inset)\\s+)?',
// x
'(?:(-?[0-9]+(?:\\.[0-9]+)?)\\s+)',
// y
@ -16,7 +17,10 @@ export const parseShadow = string => {
// either hex, variable or function
'(#[0-9a-f]{6}|--[a-z\\-_]+|\\$[a-z\\-()_]+)',
// opacity (optional)
'(?:\\s+\\/\\s+([0-9]+(?:\\.[0-9]+)?)\\s*)?$'
'(?:\\s+\\/\\s+([0-9]+(?:\\.[0-9]+)?)\\s*)?',
// name
'(?:\\s+#(\\w+)\\s*)?',
'$'
].join('')
const regex = new RegExp(regexPrep, 'gis') // global, (stable) indices, single-string
const result = regex.exec(string)
@ -28,7 +32,7 @@ export const parseShadow = string => {
}
} else {
const numeric = new Set(['x', 'y', 'blur', 'spread', 'alpha'])
const { x, y, blur, spread, alpha, inset, color } = Object.fromEntries(modes.map((mode, i) => {
const { x, y, blur, spread, alpha, inset, color, name } = Object.fromEntries(modes.map((mode, i) => {
if (numeric.has(mode)) {
const number = Number(result[i])
if (Number.isNaN(number)) {
@ -43,7 +47,7 @@ export const parseShadow = string => {
}
}).filter(([k, v]) => v !== false).slice(1))
return { x, y, blur, spread, color, alpha, inset }
return { x, y, blur, spread, color, alpha, inset, name }
}
}
// this works nearly the same as HTML tree converter
@ -150,7 +154,7 @@ export const deserialize = (input) => {
if (realValue === 'none') {
realValue = []
} else {
realValue = value.split(',').map(v => parseShadow(v.trim()))
realValue = value.split(',').map(v => deserializeShadow(v.trim()))
}
} if (!Number.isNaN(Number(value))) {
realValue = Number(value)

7
src/services/theme_data/iss_serializer.js
View file

@ -1,8 +1,13 @@
import { unroll } from './iss_utils.js'
import { deserializeShadow } from './iss_deserializer.js'
export const serializeShadow = (s, throwOnInvalid) => {
if (typeof s === 'object') {
return `${s.inset ? 'inset ' : ''}${s.x} ${s.y} ${s.blur} ${s.spread} ${s.color} / ${s.alpha}`
const inset = s.inset ? 'inset ' : ''
const name = s.name ? ` #${s.name} ` : ''
const result = `${inset}${s.x} ${s.y} ${s.blur} ${s.spread} ${s.color} / ${s.alpha}${name}`
deserializeShadow(result) // Verify that output is valid and parseable
return result
} else {
return s
}

4
src/services/theme_data/theme_data_3.service.js
View file

@ -22,7 +22,7 @@ import {
normalizeCombination,
findRules
} from './iss_utils.js'
import { parseShadow } from './iss_deserializer.js'
import { deserializeShadow } from './iss_deserializer.js'
// Ensuring the order of components
const components = {
@ -48,7 +48,7 @@ const findShadow = (shadows, { dynamicVars, staticVars }) => {
const variableSlot = shadow.substring(2)
return findShadow(staticVars[variableSlot], { dynamicVars, staticVars })
} else {
targetShadow = parseShadow(shadow)
targetShadow = deserializeShadow(shadow)
}
} else {
targetShadow = shadow