mirror of
https://github.com/palxiao/poster-design.git
synced 2025-07-15 16:02:19 +08:00
feat: convert wTextStyle component to composition API
This commit is contained in:
parent
acbdc2bb59
commit
15c0fc9b2b
@ -14,6 +14,7 @@ export type TStyleIconData = {
|
|||||||
tip: string
|
tip: string
|
||||||
value: string[]
|
value: string[]
|
||||||
select: boolean
|
select: boolean
|
||||||
|
extraIcon?: boolean,
|
||||||
}
|
}
|
||||||
|
|
||||||
export const styleIconList1 = [
|
export const styleIconList1 = [
|
||||||
|
@ -28,7 +28,7 @@ export type TIconItemSelectData = {
|
|||||||
extraIcon?: boolean,
|
extraIcon?: boolean,
|
||||||
tip?: string
|
tip?: string
|
||||||
icon?: string
|
icon?: string
|
||||||
value?: string | number
|
value?: string | number | number[] | string[]
|
||||||
}
|
}
|
||||||
|
|
||||||
type TProps = {
|
type TProps = {
|
||||||
|
@ -8,8 +8,8 @@
|
|||||||
import store from '@/store'
|
import store from '@/store'
|
||||||
import { toRaw } from 'vue'
|
import { toRaw } from 'vue'
|
||||||
export default () => {
|
export default () => {
|
||||||
const collector = new Set()
|
const collector = new Set<string>()
|
||||||
const fonts: any = {}
|
const fonts: Record<string, any> = {}
|
||||||
const { dWidgets: widgets } = store.getters
|
const { dWidgets: widgets } = store.getters
|
||||||
for (let i = 0; i < widgets.length; i++) {
|
for (let i = 0; i < widgets.length; i++) {
|
||||||
const { type, fontClass } = widgets[i]
|
const { type, fontClass } = widgets[i]
|
||||||
@ -18,5 +18,5 @@ export default () => {
|
|||||||
fonts[fontClass.id] = toRaw(fontClass)
|
fonts[fontClass.id] = toRaw(fontClass)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return Array.from(collector).map((id: any) => fonts[id])
|
return Array.from(collector).map((id: string) => fonts[id])
|
||||||
}
|
}
|
||||||
|
@ -60,6 +60,9 @@ export type TwTextData = {
|
|||||||
y: number
|
y: number
|
||||||
}
|
}
|
||||||
}[]
|
}[]
|
||||||
|
width?: number
|
||||||
|
height?: number
|
||||||
|
degree?: number
|
||||||
}
|
}
|
||||||
|
|
||||||
export const wTextSetting: TwTextData = {
|
export const wTextSetting: TwTextData = {
|
||||||
|
@ -1,18 +1,18 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="w-text-style">
|
<div id="w-text-style">
|
||||||
<el-collapse v-model="activeNames">
|
<el-collapse v-model="state.activeNames">
|
||||||
<el-collapse-item title="位置尺寸" name="1">
|
<el-collapse-item title="位置尺寸" name="1">
|
||||||
<div class="line-layout">
|
<div class="line-layout">
|
||||||
<number-input v-model="innerElement.left" label="X" @finish="(value) => finish('left', value)" />
|
<number-input v-model="state.innerElement.left" label="X" @finish="(value) => finish('left', value)" />
|
||||||
<number-input v-model="innerElement.top" label="Y" @finish="(value) => finish('top', value)" />
|
<number-input v-model="state.innerElement.top" label="Y" @finish="(value) => finish('top', value)" />
|
||||||
<number-input v-model="innerElement.width" style="margin-top: 0.5rem" label="宽" :editable="true" @finish="(value) => finish('width', value)" />
|
<number-input v-model="state.innerElement.width" style="margin-top: 0.5rem" label="宽" :editable="true" @finish="(value) => finish('width', value)" />
|
||||||
<number-input v-model="innerElement.height" style="margin-top: 0.5rem" label="高" :editable="true" @finish="(value) => finish('height', value)" />
|
<number-input v-model="state.innerElement.height" style="margin-top: 0.5rem" label="高" :editable="true" @finish="(value) => finish('height', value)" />
|
||||||
</div>
|
</div>
|
||||||
</el-collapse-item>
|
</el-collapse-item>
|
||||||
<!-- <el-collapse-item title="样式设置" name="2"> -->
|
<!-- <el-collapse-item title="样式设置" name="2"> -->
|
||||||
<div class="line-layout style-item">
|
<div class="line-layout style-item">
|
||||||
<value-select v-model="innerElement.fontClass" label="文字" :data="fontClassList" inputWidth="152px" :readonly="true" @finish="(font) => finish('fontClass', font)" />
|
<value-select v-model="state.innerElement.fontClass" label="文字" :data="state.fontClassList" inputWidth="152px" :readonly="true" @finish="(font) => finish('fontClass', font)" />
|
||||||
<value-select v-model="innerElement.fontSize" label="大小" suffix="px" :data="fontSizeList" @finish="(value) => finish('fontSize', value)" />
|
<value-select v-model="state.innerElement.fontSize" label="大小" suffix="px" :data="state.fontSizeList" @finish="(value) => finish('fontSize', value)" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<icon-item-select class="style-item" :data="styleIconList1" @finish="textStyleAction" />
|
<icon-item-select class="style-item" :data="styleIconList1" @finish="textStyleAction" />
|
||||||
@ -24,232 +24,242 @@
|
|||||||
</div> -->
|
</div> -->
|
||||||
<!-- <el-collapse-item title="位置尺寸" name="1"> -->
|
<!-- <el-collapse-item title="位置尺寸" name="1"> -->
|
||||||
<div class="style-item slide-wrap">
|
<div class="style-item slide-wrap">
|
||||||
<number-slider v-model="innerElement.letterSpacing" style="font-size: 14px" label="字距" labelWidth="40px" :step="0.05" :minValue="-innerElement.fontSize" :maxValue="innerElement.fontSize * 2" @finish="(value) => finish('letterSpacing', value)" />
|
<number-slider v-model="state.innerElement.letterSpacing" style="font-size: 14px" label="字距" labelWidth="40px" :step="0.05" :minValue="-state.innerElement.fontSize" :maxValue="state.innerElement.fontSize * 2" @finish="(value) => finish('letterSpacing', value)" />
|
||||||
<number-slider v-model="innerElement.lineHeight" style="font-size: 14px" label="行距" labelWidth="40px" :step="0.05" :minValue="0" :maxValue="2.5" @finish="(value) => finish('lineHeight', value)" />
|
<number-slider v-model="state.innerElement.lineHeight" style="font-size: 14px" label="行距" labelWidth="40px" :step="0.05" :minValue="0" :maxValue="2.5" @finish="(value) => finish('lineHeight', value)" />
|
||||||
</div>
|
</div>
|
||||||
<!-- </el-collapse-item> -->
|
<!-- </el-collapse-item> -->
|
||||||
|
|
||||||
<div style="flex-wrap: nowrap" class="line-layout style-item">
|
<div style="flex-wrap: nowrap" class="line-layout style-item">
|
||||||
<color-select v-model="innerElement.color" label="颜色" @finish="(value) => finish('color', value)" />
|
<color-select v-model="state.innerElement.color" label="颜色" @finish="(value) => finish('color', value)" />
|
||||||
<!-- <color-select v-model="innerElement.backgroundColor" label="背景颜色" @finish="(value) => finish('backgroundColor', value)" /> -->
|
<!-- <color-select v-model="innerElement.backgroundColor" label="背景颜色" @finish="(value) => finish('backgroundColor', value)" /> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="line-layout style-item">
|
<div class="line-layout style-item">
|
||||||
<effect-wrap v-model="innerElement.textEffects" :data="innerElement" :degree="innerElement.degree" @select="selectTextEffect" />
|
<effect-wrap v-model="state.innerElement.textEffects" :data="state.innerElement" :degree="state.innerElement.degree" @select="selectTextEffect" />
|
||||||
</div>
|
</div>
|
||||||
<icon-item-select class="style-item" :data="layerIconList" @finish="layerAction" />
|
<icon-item-select class="style-item" :data="layerIconList" @finish="layerAction" />
|
||||||
<icon-item-select class="style-item" :data="alignIconList" @finish="alignAction" />
|
<icon-item-select class="style-item" :data="alignIconList" @finish="alignAction" />
|
||||||
|
|
||||||
<!-- v-show="!innerElement.editable" -->
|
<!-- v-show="!innerElement.editable" -->
|
||||||
<div style="margin-top: 10px" class="line-layout style-item">
|
<div style="margin-top: 10px" class="line-layout style-item">
|
||||||
<text-input-area v-model="innerElement.text" @finish="(value) => finish('text', value)" />
|
<text-input-area v-model="state.innerElement.text" @finish="(value) => finish('text', value)" />
|
||||||
</div>
|
</div>
|
||||||
<!-- </el-collapse-item> -->
|
<!-- </el-collapse-item> -->
|
||||||
</el-collapse>
|
</el-collapse>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts" setup>
|
||||||
// 文本组件样式
|
// 文本组件样式
|
||||||
const NAME = 'w-text-style'
|
const NAME = 'w-text-style'
|
||||||
import { defineComponent, reactive, toRefs, computed, watch, nextTick, onMounted } from 'vue'
|
import { defineComponent, reactive, toRefs, computed, watch, nextTick, onMounted } from 'vue'
|
||||||
import { useStore } from 'vuex'
|
import { useStore } from 'vuex'
|
||||||
import { useRoute } from 'vue-router'
|
import { useRoute } from 'vue-router'
|
||||||
import { styleIconList1, styleIconList2, alignIconList } from '@/assets/data/TextIconsData'
|
import { styleIconList1, styleIconList2, alignIconList, TStyleIconData, TStyleIconData2 } from '@/assets/data/TextIconsData'
|
||||||
import layerIconList from '@/assets/data/LayerIconList'
|
import layerIconList from '@/assets/data/LayerIconList'
|
||||||
import numberInput from '../../settings/numberInput.vue'
|
import numberInput from '../../settings/numberInput.vue'
|
||||||
import numberSlider from '../../settings/numberSlider.vue'
|
import numberSlider from '../../settings/numberSlider.vue'
|
||||||
import colorSelect from '../../settings/colorSelect.vue'
|
import colorSelect from '../../settings/colorSelect.vue'
|
||||||
import iconItemSelect from '../../settings/iconItemSelect.vue'
|
import iconItemSelect, { TIconItemSelectData } from '../../settings/iconItemSelect.vue'
|
||||||
import textInputArea from '../../settings/textInputArea.vue'
|
import textInputArea from '../../settings/textInputArea.vue'
|
||||||
import valueSelect from '../../settings/valueSelect.vue'
|
import valueSelect from '../../settings/valueSelect.vue'
|
||||||
import effectWrap from '../../settings/EffectSelect/TextWrap.vue'
|
import effectWrap from '../../settings/EffectSelect/TextWrap.vue'
|
||||||
import { useFontStore } from '@/common/methods/fonts'
|
import { useFontStore } from '@/common/methods/fonts'
|
||||||
import usePageFontsFilter from './pageFontsFilter.ts'
|
import usePageFontsFilter from './pageFontsFilter'
|
||||||
|
import { wTextSetting ,TwTextData } from './wTextSetting';
|
||||||
|
|
||||||
export default defineComponent({
|
type TState = {
|
||||||
name: NAME,
|
activeNames: string[],
|
||||||
components: { numberInput, colorSelect, iconItemSelect, textInputArea, valueSelect, effectWrap, numberSlider },
|
innerElement: TwTextData,
|
||||||
setup() {
|
tag: boolean,
|
||||||
const store = useStore()
|
ingoreKeys: string[],
|
||||||
const route = useRoute()
|
fontSizeList: number[],
|
||||||
const state = reactive({
|
fontClassList: Record<string, any>, // 不能设空字体系统默认字体,因为截图服务的默认字体无法保证一致
|
||||||
activeNames: [],
|
lineHeightList: number[],
|
||||||
innerElement: {},
|
letterSpacingList: number[],
|
||||||
tag: false,
|
layerIconList: TIconItemSelectData[],
|
||||||
ingoreKeys: ['left', 'top', 'name', 'width', 'height', 'text', 'color', 'backgroundColor'],
|
styleIconList1: TStyleIconData[],
|
||||||
fontSizeList: [12, 14, 24, 26, 28, 30, 36, 48, 60, 72, 96, 108, 120, 140, 180, 200, 250, 300, 400, 500],
|
styleIconList2: TStyleIconData2[],
|
||||||
fontClassList: [], // 不能设空字体系统默认字体,因为截图服务的默认字体无法保证一致
|
alignIconList: TIconItemSelectData[],
|
||||||
lineHeightList: [1, 1.5, 2],
|
}
|
||||||
letterSpacingList: [0, 10, 25, 50, 75, 100, 200],
|
|
||||||
layerIconList,
|
const store = useStore()
|
||||||
styleIconList1,
|
const route = useRoute()
|
||||||
styleIconList2,
|
const state = reactive<TState>({
|
||||||
alignIconList,
|
activeNames: [],
|
||||||
|
innerElement: JSON.parse(JSON.stringify(wTextSetting)),
|
||||||
|
tag: false,
|
||||||
|
ingoreKeys: ['left', 'top', 'name', 'width', 'height', 'text', 'color', 'backgroundColor'],
|
||||||
|
fontSizeList: [12, 14, 24, 26, 28, 30, 36, 48, 60, 72, 96, 108, 120, 140, 180, 200, 250, 300, 400, 500],
|
||||||
|
fontClassList: {}, // 不能设空字体系统默认字体,因为截图服务的默认字体无法保证一致
|
||||||
|
lineHeightList: [1, 1.5, 2],
|
||||||
|
letterSpacingList: [0, 10, 25, 50, 75, 100, 200],
|
||||||
|
layerIconList,
|
||||||
|
styleIconList1,
|
||||||
|
styleIconList2,
|
||||||
|
alignIconList,
|
||||||
|
})
|
||||||
|
const dActiveElement = computed(() => store.getters.dActiveElement)
|
||||||
|
const dMoving = computed(() => store.getters.dMoving)
|
||||||
|
// const isDraw = computed(() => route.name === 'Draw')
|
||||||
|
|
||||||
|
watch(() => dActiveElement.value, () => {
|
||||||
|
change()
|
||||||
|
}, { deep: true })
|
||||||
|
|
||||||
|
watch(() => state.innerElement, () => {
|
||||||
|
changeValue()
|
||||||
|
}, { deep: true })
|
||||||
|
|
||||||
|
let timer: boolean | null = null
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
change()
|
||||||
|
setTimeout(() => {
|
||||||
|
loadFonts()
|
||||||
|
}, 100)
|
||||||
|
})
|
||||||
|
|
||||||
|
function change() {
|
||||||
|
if (timer) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
timer = true
|
||||||
|
setTimeout(() => {
|
||||||
|
timer = null
|
||||||
|
}, 300)
|
||||||
|
state.tag = true
|
||||||
|
state.innerElement = JSON.parse(JSON.stringify(dActiveElement.value))
|
||||||
|
changeStyleIconList()
|
||||||
|
}
|
||||||
|
|
||||||
|
function changeValue() {
|
||||||
|
if (state.tag) {
|
||||||
|
state.tag = false
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (dMoving.value) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// TODO 修改数值
|
||||||
|
for (let key in state.innerElement) {
|
||||||
|
const itemKey = key as keyof TwTextData
|
||||||
|
if (state.ingoreKeys.indexOf(itemKey) !== -1) {
|
||||||
|
dActiveElement.value[itemKey] = state.innerElement[itemKey]
|
||||||
|
} else if (key !== 'setting' && key !== 'record' && state.innerElement[itemKey] !== dActiveElement.value[itemKey]) {
|
||||||
|
// const pushHistory = !['textEffects', 'transformData', 'fontClass'].includes(key)
|
||||||
|
store.dispatch('updateWidgetData', {
|
||||||
|
uuid: dActiveElement.value.uuid,
|
||||||
|
key,
|
||||||
|
value: state.innerElement[itemKey],
|
||||||
|
pushHistory: false,
|
||||||
})
|
})
|
||||||
const dActiveElement = computed(() => store.getters.dActiveElement)
|
|
||||||
const dMoving = computed(() => store.getters.dMoving)
|
|
||||||
// const isDraw = computed(() => route.name === 'Draw')
|
|
||||||
|
|
||||||
watch(() => dActiveElement.value, () => {
|
|
||||||
change()
|
|
||||||
}, { deep: true })
|
|
||||||
|
|
||||||
watch(() => state.innerElement, () => {
|
|
||||||
changeValue()
|
|
||||||
}, { deep: true })
|
|
||||||
|
|
||||||
let timer: any = null
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
change()
|
|
||||||
setTimeout(() => {
|
|
||||||
loadFonts()
|
|
||||||
}, 100)
|
|
||||||
})
|
|
||||||
|
|
||||||
function change() {
|
|
||||||
if (timer) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
timer = true
|
|
||||||
setTimeout(() => {
|
|
||||||
timer = null
|
|
||||||
}, 300)
|
|
||||||
state.tag = true
|
|
||||||
state.innerElement = JSON.parse(JSON.stringify(dActiveElement.value))
|
|
||||||
changeStyleIconList()
|
|
||||||
}
|
|
||||||
|
|
||||||
function changeValue() {
|
|
||||||
if (state.tag) {
|
|
||||||
state.tag = false
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (dMoving.value) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// TODO 修改数值
|
|
||||||
for (let key in state.innerElement) {
|
|
||||||
if (state.ingoreKeys.indexOf(key) !== -1) {
|
|
||||||
dActiveElement.value[key] = state.innerElement[key]
|
|
||||||
} else if (key !== 'setting' && key !== 'record' && state.innerElement[key] !== dActiveElement.value[key]) {
|
|
||||||
// const pushHistory = !['textEffects', 'transformData', 'fontClass'].includes(key)
|
|
||||||
store.dispatch('updateWidgetData', {
|
|
||||||
uuid: dActiveElement.value.uuid,
|
|
||||||
key,
|
|
||||||
value: state.innerElement[key],
|
|
||||||
pushHistory: false,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function selectTextEffect({ key, value, style }: any) {
|
|
||||||
const uuid = dActiveElement.value.uuid
|
|
||||||
store.commit('setWidgetStyle', { uuid, key, value })
|
|
||||||
if (style) {
|
|
||||||
finish('color', style.color || '')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadFonts() {
|
|
||||||
const localFonts = useFontStore.list
|
|
||||||
const fontLists = { 当前页面: [], 中文: [], 英文: [] }
|
|
||||||
for (const font of localFonts) {
|
|
||||||
const { id, oid, value, url, alias, preview, lang } = font
|
|
||||||
const item = { id, oid, value, url, alias, preview }
|
|
||||||
lang === 'zh' ? fontLists['中文'].unshift(item) : fontLists['英文'].unshift(item)
|
|
||||||
}
|
|
||||||
fontLists['当前页面'] = usePageFontsFilter()
|
|
||||||
state.fontClassList = fontLists
|
|
||||||
}
|
|
||||||
|
|
||||||
function finish(key, value) {
|
|
||||||
store.dispatch('updateWidgetData', {
|
|
||||||
uuid: dActiveElement.value.uuid,
|
|
||||||
key,
|
|
||||||
value,
|
|
||||||
pushHistory: false,
|
|
||||||
})
|
|
||||||
setTimeout(() => {
|
|
||||||
key === 'fontClass' && (state.fontClassList['当前页面'] = usePageFontsFilter())
|
|
||||||
}, 300)
|
|
||||||
}
|
|
||||||
|
|
||||||
function layerAction(item) {
|
|
||||||
store.dispatch('updateLayerIndex', {
|
|
||||||
uuid: dActiveElement.value.uuid,
|
|
||||||
value: item.value,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
async function textStyleAction(item) {
|
|
||||||
let value = item.key === 'textAlign' ? item.value : item.value[item.select ? 1 : 0]
|
|
||||||
state.innerElement[item.key] = value
|
|
||||||
// TODO: 对竖版文字的特殊处理
|
|
||||||
item.key === 'writingMode' && relationChange()
|
|
||||||
await nextTick()
|
|
||||||
store.commit('updateRect')
|
|
||||||
}
|
|
||||||
|
|
||||||
async function alignAction(item) {
|
|
||||||
store.dispatch('updateAlign', {
|
|
||||||
align: item.value,
|
|
||||||
uuid: dActiveElement.value.uuid,
|
|
||||||
})
|
|
||||||
await nextTick()
|
|
||||||
store.commit('updateRect')
|
|
||||||
}
|
|
||||||
|
|
||||||
function changeStyleIconList() {
|
|
||||||
for (let i = 0; i < state.styleIconList1.length; ++i) {
|
|
||||||
let key = state.styleIconList1[i].key
|
|
||||||
state.styleIconList1[i].select = false
|
|
||||||
const [unchecked, checked] = state.styleIconList1[i].value
|
|
||||||
switch (key) {
|
|
||||||
case 'fontWeight':
|
|
||||||
case 'textDecoration':
|
|
||||||
case 'fontStyle':
|
|
||||||
if (state.innerElement[key] !== unchecked && state.innerElement[key] == checked) {
|
|
||||||
state.styleIconList1[i].select = !state.styleIconList1[i].select
|
|
||||||
}
|
|
||||||
break
|
|
||||||
case 'writingMode':
|
|
||||||
if (state.innerElement[key] !== unchecked) {
|
|
||||||
state.styleIconList1[i].select = true
|
|
||||||
}
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
for (let i = 0; i < state.styleIconList2.length; i++) {
|
|
||||||
let key = state.styleIconList2[i].key
|
|
||||||
state.styleIconList2[i].select = false
|
|
||||||
if (key === 'textAlign' && state.innerElement[key] === state.styleIconList2[i].value) {
|
|
||||||
state.styleIconList2[i].select = true
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function relationChange() {
|
|
||||||
setTimeout(() => {
|
|
||||||
if (dActiveElement.value.writingMode) {
|
|
||||||
const w_record = dActiveElement.value.width
|
|
||||||
state.innerElement.width = dActiveElement.value.height
|
|
||||||
state.innerElement.height = w_record
|
|
||||||
}
|
|
||||||
}, 10)
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
...toRefs(state),
|
|
||||||
selectTextEffect,
|
|
||||||
textStyleAction,
|
|
||||||
finish,
|
|
||||||
layerAction,
|
|
||||||
alignAction
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectTextEffect({ key, value, style }: any) {
|
||||||
|
const uuid = dActiveElement.value.uuid
|
||||||
|
store.commit('setWidgetStyle', { uuid, key, value })
|
||||||
|
if (style) {
|
||||||
|
finish('color', style.color || '')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadFonts() {
|
||||||
|
const localFonts = useFontStore.list
|
||||||
|
const fontLists: Record<string, any> = { 当前页面: [], 中文: [], 英文: [] }
|
||||||
|
for (const font of localFonts) {
|
||||||
|
const { id, oid, value, url, alias, preview, lang } = font
|
||||||
|
const item = { id, oid, value, url, alias, preview }
|
||||||
|
lang === 'zh' ? fontLists['中文'].unshift(item) : fontLists['英文'].unshift(item)
|
||||||
|
}
|
||||||
|
fontLists['当前页面'] = usePageFontsFilter()
|
||||||
|
state.fontClassList = fontLists
|
||||||
|
}
|
||||||
|
|
||||||
|
function finish(key: string, value: number | Record<string, any> | string) {
|
||||||
|
store.dispatch('updateWidgetData', {
|
||||||
|
uuid: dActiveElement.value.uuid,
|
||||||
|
key,
|
||||||
|
value,
|
||||||
|
pushHistory: false,
|
||||||
|
})
|
||||||
|
setTimeout(() => {
|
||||||
|
key === 'fontClass' && (state.fontClassList['当前页面'] = usePageFontsFilter())
|
||||||
|
}, 300)
|
||||||
|
}
|
||||||
|
|
||||||
|
function layerAction(item: TIconItemSelectData) {
|
||||||
|
store.dispatch('updateLayerIndex', {
|
||||||
|
uuid: dActiveElement.value.uuid,
|
||||||
|
value: item.value,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async function textStyleAction(item: TIconItemSelectData) {
|
||||||
|
let value = item.key === 'textAlign' ? item.value : (item.value as number[])[item.select ? 1 : 0];
|
||||||
|
(state.innerElement as Record<string, any>)[item.key || ""] = value
|
||||||
|
// TODO: 对竖版文字的特殊处理
|
||||||
|
item.key === 'writingMode' && relationChange()
|
||||||
|
await nextTick()
|
||||||
|
store.commit('updateRect')
|
||||||
|
}
|
||||||
|
|
||||||
|
async function alignAction(item: TIconItemSelectData) {
|
||||||
|
store.dispatch('updateAlign', {
|
||||||
|
align: item.value,
|
||||||
|
uuid: dActiveElement.value.uuid,
|
||||||
|
})
|
||||||
|
await nextTick()
|
||||||
|
store.commit('updateRect')
|
||||||
|
}
|
||||||
|
|
||||||
|
function changeStyleIconList() {
|
||||||
|
for (let i = 0; i < state.styleIconList1.length; ++i) {
|
||||||
|
let key = state.styleIconList1[i].key
|
||||||
|
state.styleIconList1[i].select = false
|
||||||
|
const [unchecked, checked] = state.styleIconList1[i].value
|
||||||
|
switch (key) {
|
||||||
|
case 'fontWeight':
|
||||||
|
case 'textDecoration':
|
||||||
|
case 'fontStyle':
|
||||||
|
if (state.innerElement[key] !== unchecked && state.innerElement[key] == checked) {
|
||||||
|
state.styleIconList1[i].select = !state.styleIconList1[i].select
|
||||||
|
}
|
||||||
|
break
|
||||||
|
case 'writingMode':
|
||||||
|
if (state.innerElement[key] !== unchecked) {
|
||||||
|
state.styleIconList1[i].select = true
|
||||||
|
}
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (let i = 0; i < state.styleIconList2.length; i++) {
|
||||||
|
let key = state.styleIconList2[i].key
|
||||||
|
state.styleIconList2[i].select = false
|
||||||
|
if (key === 'textAlign' && state.innerElement[key] === state.styleIconList2[i].value) {
|
||||||
|
state.styleIconList2[i].select = true
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function relationChange() {
|
||||||
|
setTimeout(() => {
|
||||||
|
if (dActiveElement.value.writingMode) {
|
||||||
|
const w_record = dActiveElement.value.width
|
||||||
|
state.innerElement.width = dActiveElement.value.height
|
||||||
|
state.innerElement.height = w_record
|
||||||
|
}
|
||||||
|
}, 10)
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
selectTextEffect,
|
||||||
|
textStyleAction,
|
||||||
|
finish,
|
||||||
|
layerAction,
|
||||||
|
alignAction
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user