From d36e7c44a6102ad22d3a3df73e94773d84099e2c Mon Sep 17 00:00:00 2001
From: Nevermore <15972699417@163.com>
Date: Tue, 13 Aug 2024 14:13:32 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0text=E6=A8=AA=E7=BA=B5?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/extension/object/VerticalText.ts            |  1 +
 .../ElementStylePanel/TextboxStylePanel.vue     | 17 +++++++++++------
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/extension/object/VerticalText.ts b/src/extension/object/VerticalText.ts
index 077b4b61..48036719 100644
--- a/src/extension/object/VerticalText.ts
+++ b/src/extension/object/VerticalText.ts
@@ -100,6 +100,7 @@ export class VerticalText extends IText {
       chars += this._textLines[lineIndex][i];
       drawWidth += this.__charBounds[lineIndex][i].width;
     }
+    // const widthFactor = (drawWidth + localLineHeight / this.lineHeight);
     const widthFactor = (localLineHeight / this.lineHeight);
     const heightFactor = drawWidth / 2 - charBox.height;
     drawLeft = drawLeft - widthFactor / 2;
diff --git a/src/views/Editor/CanvasRight/ElementStylePanel/TextboxStylePanel.vue b/src/views/Editor/CanvasRight/ElementStylePanel/TextboxStylePanel.vue
index 8feaad1e..d15f141d 100644
--- a/src/views/Editor/CanvasRight/ElementStylePanel/TextboxStylePanel.vue
+++ b/src/views/Editor/CanvasRight/ElementStylePanel/TextboxStylePanel.vue
@@ -95,12 +95,12 @@
     <el-row class="mt-10">
       <el-button-group class="full-group">
         <el-tooltip placement="top" content="横向" :hide-after="0">
-          <el-button @click="handleElementArrange(false)" :type="!elementGrapheme ? 'primary': ''">
+          <el-button @click="handleElementArrange(false)" :type="elementGrapheme ? 'primary': ''">
             <IconTextRotationNone />
           </el-button>
         </el-tooltip>
         <el-tooltip placement="top" content="纵向" :hide-after="0">
-          <el-button @click="handleElementArrange(true)" :type="elementGrapheme ? 'primary': ''">
+          <el-button @click="handleElementArrange(true)" :type="!elementGrapheme ? 'primary': ''">
             <IconTextRotationDown />
           </el-button>
         </el-tooltip>
@@ -250,7 +250,7 @@ const { canvasObject, systemFonts, onlineFonts } = storeToRefs(mainStore)
 const { createPathElement } = useHandleCreate()
 const [ canvas ] = useCanvas()
 const handleElement = computed(() => canvasObject.value as Textbox | ArcText)
-const elementGrapheme = computed(() => handleElement.value.type !== ElementNames.ARCTEXT)
+const elementGrapheme = computed(() => handleElement.value.type.toLowerCase() !== ElementNames.VERTICALTEXT)
 const elementBackgrounColor = computed(() => {
   if (handleElement.value.type.toLowerCase() === ElementNames.ARCTEXT) {
     return handleElement.value.textBackgroundColor
@@ -469,16 +469,21 @@ const changeCharSpacing = (charSpacing: number) => {
 
 const handleElementArrange = (status: boolean) => {
   // handleElement.value.set({splitByGrapheme: status, width: handleElement.value.fontSize})
+  console.log('status:', status)
   const options = (handleElement.value as any).toObject(propertiesToInclude as any[])
   options.lineHeight = 12
   delete options.type
   options.id = nanoid(10)
-  const verticalText = new VerticalText(handleElement.value.text, options)
+  let textElement = new Textbox(handleElement.value.text, options)
+  if (status) {
+    textElement = new VerticalText(handleElement.value.text, options)
+  }
   canvas.remove(canvas.getActiveObject())
   canvas.discardActiveObject()
-  canvas.add(verticalText)
+  canvas.add(textElement)
   templatesStore.modifedElement()
-  canvas.setActiveObject(verticalText)
+  canvas.setActiveObject(textElement)
+  mainStore.setCanvasObject(textElement)
   canvas.renderAll()
 }