feat&fix: Text Settings

src/assets/data/TextIconsData.ts

@@ -2,8 +2,8 @@
  * @Author: ShawnPhang
  * @Date: 2021-08-02 18:27:27
  * @Description:
- * @LastEditors: ShawnPhang, Jeremy Yu <https://github.com/JeremyYu-cn>
- * @LastEditTime: 2024-03-01 20:55:51
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>
+ * @LastEditTime: 2024-11-14 16:41:19
  */
 
 import { AlignListData } from "./AlignListData"
@@ -92,6 +92,13 @@ export const styleIconList2 = [
     value: 'justify',
     select: false,
   },
+  {
+    key: 'textAlignLast',
+    icon: 'icon-align-justify-text',
+    tip: '分散对齐',
+    value: 'justify',
+    select: false,
+  },
 ] as TStyleIconData2[]
 
 export const alignIconList = [

src/components/modules/settings/iconItemSelect.vue

@@ -3,12 +3,12 @@
  * @Date: 2021-07-29 18:31:27
  * @Description: 
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2024-04-10 07:36:58
+ * @LastEditTime: 2024-11-14 16:48:06
 -->
 <template>
   <div class="icon-item-select">
     <span v-if="label" class="label">{{ label }}</span>
-    <ul class="list btn__bar flex">
+    <ul v-if="data" class="list btn__bar flex">
       <el-tooltip v-for="(item, index) in data" :key="index" class="item" effect="dark" :content="item.tip" placement="top" :show-after="300" >
         <li :class="{ 'list-item': true, active: item.select }" @click="selectItem(item)">
           <i :class="`${item.extraIcon ? 'icon' : 'iconfont'} ${item.icon}`"></i>
@@ -52,6 +52,8 @@ function selectItem(item: TIconItemSelectData) {
     item.select = !item.select
   }
   emit('finish', item)
+  // text-align非独立选项，恢复选中状态
+  item.key === 'textAlign' && (item.select = true)
 }
 
 </script>

src/components/modules/widgets/wText/wText.vue

@@ -17,6 +17,7 @@
       fontSize: params.fontSize + 'px',
       color: params.color,
       textAlign: params.textAlign,
+      textAlignLast: params.textAlignLast,
       fontWeight: params.fontWeight,
       fontStyle: params.fontStyle,
       textDecoration: params.textDecoration,
@@ -188,7 +189,7 @@ function writeDone(e: Event) {
 }
 
 function dblclickText(_: MouseEvent) {
-  // store.commit('setShowMoveable', false)
+  if (state.editable) return
   state.editable = true
   const el = editWrap.value || widget.value
   setTimeout(() => {

src/components/modules/widgets/wText/wTextSetting.ts

@@ -25,6 +25,7 @@ export type TwTextData = {
   textDecoration: string
   color: string
   textAlign: StyleProperty.TextAlign
+  textAlignLast: StyleProperty.TextAlign
   text: string
   opacity: number
   backgroundColor: string

src/components/modules/widgets/wText/wTextStyle.vue

@@ -15,8 +15,8 @@
         <value-select v-model="state.innerElement.fontSize" label="大小" suffix="px" :data="state.fontSizeList" @finish="(value) => finish('fontSize', value)" />
       </div>
 
-      <icon-item-select class="style-item" :data="styleIconList1" @finish="textStyleAction" />
-      <icon-item-select class="style-item" :data="styleIconList2" @finish="textStyleAction" />
+      <icon-item-select class="style-item" :data="state.styleIconList1" @finish="textStyleAction" />
+      <icon-item-select class="style-item" :data="state.styleIconList2" @finish="textStyleAction" />
 
       <!-- <div style="flex-wrap: nowrap" class="line-layout style-item">
         <value-select v-model="innerElement.lineHeight" label="行距" suffix="倍" :data="lineHeightList" @finish="(value) => finish('lineHeight', value)" />
@@ -213,13 +213,16 @@ function layerAction(item: TIconItemSelectData) {
 }
 
 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: 对竖版文字的特殊处理
+  const innerText = state.innerElement as Record<string, any>
+  let value = ['textAlign', 'textAlignLast'].includes(item.key || '') ? item.value : (item.value as number[])[item.select ? 1 : 0]
+  // 分散对齐判断是否选中，选中时则为抹去属性
+  item.key === 'textAlignLast' && innerText[item.key] === value && (value = undefined)
+  // 设置属性
+  item.key && (innerText[item.key] = value)
+  // 对竖版文字特殊处理
   item.key === 'writingMode' && relationChange()
   await nextTick()
   forceStore.setUpdateRect()
-  // store.commit('updateRect')
 }
 
 async function alignAction(item: TIconItemSelectData) {
@@ -259,7 +262,7 @@ function changeStyleIconList() {
   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) {
+    if (['textAlign', 'textAlignLast'].includes(key || '') && state.innerElement[key] === state.styleIconList2[i].value) {
       state.styleIconList2[i].select = true
       continue
     }

src/types/style.d.ts

@@ -1,6 +1,6 @@
 
 
 namespace StyleProperty {
-  type TextAlign = "center" | "end" | "left" | "right" | "start";
+  type TextAlign = "center" | "end" | "left" | "right" | "start" | "justify";
   type WritingMode = Globals | "horizontal-tb" | "sideways-lr" | "sideways-rl" | "vertical-lr" | "vertical-rl";
 }