feat: TextBox align (#54)

src/BlockHub/TextBoxBlock/TextBox.vue

@@ -8,13 +8,13 @@ const { block } = defineProps<{
   block: TextBoxBlock
 }>()
 
-const { x, y, width, height, rotate, textStore, bindController } = block
+const { x, y, width, height, rotate, align, textStore, bindController } = block
 
-const props = ref({ x, y, width, height, rotate })
+const props = ref({ x, y, width, height, rotate, align })
 block.props.events.update.on(({ key, to }) => {
   const value = to as number
   const rectKey = key as BasicPropName
-  if (['x', 'y', 'width', 'height', 'rotate'].includes(rectKey)) {
+  if (['x', 'y', 'width', 'height', 'rotate', 'align'].includes(rectKey)) {
     props.value[rectKey] = value
   }
 })
@@ -30,6 +30,7 @@ block.props.events.update.on(({ key, to }) => {
       height: `${props.height}px`,
       rotate: `${props.rotate}deg`,
       padding: '4px',
+      textAlign: `${props.align}`,
     }"
   >
     <RichText :textStore="textStore" :bindController="bindController" />

src/BlockHub/TextBoxBlock/TextBoxBlock.ts

@@ -4,16 +4,27 @@ import { type MapStore } from '@Kernel/Store/MapStore'
 import { RichTextController } from '@RichText/RichText'
 import { TEXT_BOX_DEFAULT_HEIGHT, TEXT_BOX_DEFAULT_WIDTH } from '@Const/block'
 
+export type AlignType = 'left' | 'right' | 'center'
+
 export class TextBoxBlock extends Block {
   constructor(x: number, y: number, width: number = TEXT_BOX_DEFAULT_WIDTH, height: number = TEXT_BOX_DEFAULT_HEIGHT) {
     super('TextBox', x, y, width, height)
-    ;(this.store.get('props') as MapStore).set('text', new TextStore())
+    this.props.set('text', new TextStore())
+    this.props.set('align', 'left')
   }
 
   get textStore(): TextStore {
     return (this.store.get('props') as MapStore).get('text') as TextStore
   }
 
+  get align() {
+    return this.props.get('align') as AlignType
+  }
+
+  set align(value: AlignType) {
+    this.props.set('align', value)
+  }
+
   bindController = (controller: RichTextController) => {
     this.controllerMap[this.id] = controller
   }

src/UserInterface/ToolBar/components/Home/Paragraph.vue

@@ -1,22 +1,62 @@
 <script setup lang="ts">
 import {
-  ListCheckbox,
-  OrderedList,
-  AlignTextLeftOne,
-  AlignTextRightOne,
-  RowHeight,
-  AlignTextBoth,
+  // ListCheckbox,
+  // OrderedList,
+  // AlignTextLeftOne,
+  // AlignTextRightOne,
+  // RowHeight,
+  // AlignTextBoth,
   AlignTextLeft,
   AlignTextRight,
   AlignTextCenter,
 } from '@icon-park/vue-next'
 import MenuWrapper from '../MenuWrapper.vue'
+import { AlignType, TextBoxBlock } from '@BlockHub/TextBoxBlock/TextBoxBlock'
+import { selectionManager } from '@Kernel/index'
+import { ref, shallowRef } from 'vue'
+import { computed } from 'vue'
+
+const selectedBlocks = shallowRef(selectionManager.selectedBlocks)
+selectionManager.events.update.on(() => {
+  selectedBlocks.value = selectionManager.selectedBlocks
+  updateAlignState(textBoxBlocks.value)
+})
+
+const textBoxBlocks = computed(() => {
+  const blocks = selectedBlocks.value.filter((block) => block.type === 'TextBox') as TextBoxBlock[]
+  blocks.forEach((block) => {
+    block.props.events.update.on(() => updateAlignState(blocks))
+  })
+  return blocks
+})
+
+const alignState = ref()
+const updateAlignState = (blocks: TextBoxBlock[]) => {
+  if (blocks.length === 0) {
+    alignState.value = undefined
+    return
+  }
+  const align = blocks[0].align
+  for (let i = 1; i < blocks.length; i++) {
+    if (align !== blocks[i].align) {
+      alignState.value = undefined
+      return
+    }
+  }
+  alignState.value = align
+}
+
+const updateAlign = (value: AlignType) => {
+  textBoxBlocks.value.forEach((block) => {
+    block.align = value
+  })
+}
 </script>
 
 <template>
   <MenuWrapper :name="$t('ToolBar.home.paragraph.title')">
     <div class="max-w-[170px] flex flex-wrap items-center text-xs pt-1">
-      <button class="menu-btn">
+      <!-- <button class="menu-btn">
         <list-checkbox theme="two-tone" size="24" :fill="['#333', '#43CCF8']" :strokeWidth="2" />
       </button>
       <button class="menu-btn w-7 h-7">
@@ -30,19 +70,31 @@ import MenuWrapper from '../MenuWrapper.vue'
       </button>
       <button class="menu-btn">
         <row-height size="24" :strokeWidth="2" />
-      </button>
-      <button class="menu-btn">
+      </button> -->
+      <button
+        class="menu-btn"
+        @click="updateAlign('left')"
+        :class="{ 'border border-black bg-gray-200': alignState === 'left' }"
+      >
         <align-text-left size="24" :strokeWidth="2" />
       </button>
-      <button class="menu-btn">
+      <button
+        class="menu-btn"
+        @click="updateAlign('center')"
+        :class="{ 'border border-black bg-gray-200': alignState === 'center' }"
+      >
         <align-text-center size="24" :strokeWidth="2" />
       </button>
-      <button class="menu-btn">
+      <button
+        class="menu-btn"
+        @click="updateAlign('right')"
+        :class="{ 'border border-black bg-gray-200': alignState === 'right' }"
+      >
         <align-text-right size="24" :strokeWidth="2" />
       </button>
-      <button class="menu-btn">
+      <!-- <button class="menu-btn">
         <align-text-both size="24" :strokeWidth="2" />
-      </button>
+      </button> -->
     </div>
   </MenuWrapper>
 </template>