From 0b89eb111c8b7498bac29829b30b0f09135e2b4e Mon Sep 17 00:00:00 2001
From: "d.malygin" <d.malygin@iqdev.digital>
Date: Wed, 21 Aug 2024 18:56:23 +0500
Subject: [PATCH] refactor of entity of text and some more additions

---
 components.d.ts                               |   4 +
 src/app/interfaces/entities.ts                |  19 +-
 src/app/interfaces/environment.ts             |  23 ++-
 src/components/CreateEntityMenu.vue           |   8 +-
 ...mageMoveMenu.vue => ImagePositionMenu.vue} |  70 +++++++-
 .../editEntityMenu/ImageSizeMenu.vue          |  59 +++++--
 .../editEntityMenu/ImageStateMenu.vue         |  14 +-
 .../editEntityMenu/TextFontMenu.vue           |  90 ++++++++++
 .../editEntityMenu/TextMoveMenu.vue           |  73 --------
 .../editEntityMenu/TextPositionMenu.vue       | 164 ++++++++++++++++++
 .../editEntityMenu/TextStateMenu.vue          |   2 +-
 src/modules/entities/ImageItem.vue            | 107 ++++++++----
 src/modules/entities/TextItem.vue             | 132 ++++++++++----
 src/output.css                                |  83 +++++----
 14 files changed, 636 insertions(+), 212 deletions(-)
 rename src/components/editEntityMenu/{ImageMoveMenu.vue => ImagePositionMenu.vue} (63%)
 create mode 100644 src/components/editEntityMenu/TextFontMenu.vue
 delete mode 100644 src/components/editEntityMenu/TextMoveMenu.vue
 create mode 100644 src/components/editEntityMenu/TextPositionMenu.vue

diff --git a/components.d.ts b/components.d.ts
index c0b7007..6a4a099 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -15,6 +15,7 @@ declare module 'vue' {
     Drawer: typeof import('primevue/drawer')['default']
     ImageItem: typeof import('@/modules/entities/ImageItem.vue')['default']
     ImageMoveMenu: typeof import('./src/components/editEntityMenu/ImageMoveMenu.vue')['default']
+    ImagePositionMenu: typeof import('./src/components/editEntityMenu/ImagePositionMenu.vue')['default']
     ImageSizeMenu: typeof import('./src/components/editEntityMenu/ImageSizeMenu.vue')['default']
     ImageStateMenu: typeof import('./src/components/editEntityMenu/ImageStateMenu.vue')['default']
     LogoAndLabel: typeof import('./src/components/LogoAndLabel.vue')['default']
@@ -29,9 +30,12 @@ declare module 'vue' {
     StateImageMenu: typeof import('./src/components/editEntityMenu/image/StateImageMenu.vue')['default']
     StateMenu: typeof import('./src/components/editEntityMenu/text/StateMenu.vue')['default']
     StateTextMenu: typeof import('./src/components/editEntityMenu/text/StateTextMenu.vue')['default']
+    TextFontMenu: typeof import('./src/components/editEntityMenu/TextFontMenu.vue')['default']
     TextItem: typeof import('@/modules/entities/TextItem.vue')['default']
     TextMoveMenu: typeof import('./src/components/editEntityMenu/TextMoveMenu.vue')['default']
+    TextPositionMenu: typeof import('./src/components/editEntityMenu/TextPositionMenu.vue')['default']
     TextStateMenu: typeof import('./src/components/editEntityMenu/TextStateMenu.vue')['default']
+    TextWidthMenu: typeof import('./src/components/editEntityMenu/TextWidthMenu.vue')['default']
     Toast: typeof import('primevue/toast')['default']
     Tree: typeof import('primevue/tree')['default']
     UserInfoHeaderWithSettings: typeof import('./src/components/UserInfoHeaderWithSettings.vue')['default']
diff --git a/src/app/interfaces/entities.ts b/src/app/interfaces/entities.ts
index 984ca16..956d3fb 100644
--- a/src/app/interfaces/entities.ts
+++ b/src/app/interfaces/entities.ts
@@ -1,4 +1,6 @@
-export interface ITable {
+import type { IEntity } from '@/app/interfaces/environment';
+
+export interface ITable extends IEntity {
   entity_type: 'table';
   entity_uuid: string;
   title?: string;
@@ -24,24 +26,29 @@ type ITableColumnTypes =
   | 'rating'
   | 'knob';
 
-export interface IText {
+export interface IText extends IEntity {
   entity_type: 'text';
   entity_uuid: string;
   title?: string;
   text: string;
+  font_size?: '16' | '20' | '24' | '40' | '64';
+  paragraph_size?: 'full' | 'half';
+  entity_title_position: 'left' | 'center' | 'right';
+  entity_position: 'left' | 'center' | 'right';
 }
 
-export interface IImage {
+export interface IImage extends IEntity {
   entity_type: 'image';
   entity_uuid: string;
   title?: string;
   text?: string;
-  text_size?: 'small' | 'medium' | 'large';
-  paragraph_size?: 'small' | 'medium' | 'large' | 'extraLarge';
+  font_size?: '16' | '20' | '24' | '40' | '64';
+  paragraph_size?: 'full' | 'half';
   text_position?: 'left' | 'right';
   image_url: string;
   image_width: number;
   image_height: number;
-  image_position: 'left' | 'center' | 'right';
   image_scale: string;
+  entity_title_position: 'left' | 'center' | 'right';
+  entity_position: 'left' | 'center' | 'right';
 }
diff --git a/src/app/interfaces/environment.ts b/src/app/interfaces/environment.ts
index 699199e..a0f290d 100644
--- a/src/app/interfaces/environment.ts
+++ b/src/app/interfaces/environment.ts
@@ -1,5 +1,3 @@
-import type { IImage, ITable, IText } from '@/app/interfaces/entities';
-
 export interface ISheet {
   sheet_uuid: string;
   title: string;
@@ -7,7 +5,26 @@ export interface ISheet {
   entities: IEntity[];
 }
 
-export type IEntity = IText | ITable | IImage;
+export interface IEntity {
+  entity_uuid: string;
+  entity_user?: string;
+  user_nick_name?: string;
+  entity_order?: number;
+  entity_type: string;
+  title?: string;
+  text?: string;
+  font_size?: string;
+  paragraph_size?: string;
+  text_position?: string;
+  image_url?: string;
+  image_width?: number;
+  image_height?: number;
+  entity_position?: string;
+  entity_title_position?: string;
+  image_scale?: string;
+  table_columns?: string;
+  table_data?: string;
+}
 
 export type TThemes =
   | 'green-blue'
diff --git a/src/components/CreateEntityMenu.vue b/src/components/CreateEntityMenu.vue
index cb07a87..15d92a7 100644
--- a/src/components/CreateEntityMenu.vue
+++ b/src/components/CreateEntityMenu.vue
@@ -23,7 +23,8 @@ const addImage = async (files: FileList) => {
       entity_type: 'image',
       entity_uuid: imageUuid,
       image_url: image.src,
-      image_position: 'left',
+      entity_position: 'left',
+      entity_title_position: 'center',
       image_width: image.width,
       image_height: image.height,
       image_scale: '1'
@@ -44,7 +45,10 @@ const speedDialItems = ref([
       emit('addEntity', {
         entity_type: 'text',
         entity_uuid: uuidv4(),
-        text: ''
+        text: '',
+        paragraph_size: 'full',
+        font_size: '24',
+        entity_position: 'left'
       });
     }
   },
diff --git a/src/components/editEntityMenu/ImageMoveMenu.vue b/src/components/editEntityMenu/ImagePositionMenu.vue
similarity index 63%
rename from src/components/editEntityMenu/ImageMoveMenu.vue
rename to src/components/editEntityMenu/ImagePositionMenu.vue
index 6ba5846..95dd045 100644
--- a/src/components/editEntityMenu/ImageMoveMenu.vue
+++ b/src/components/editEntityMenu/ImagePositionMenu.vue
@@ -8,12 +8,18 @@ interface Props {
   entityData: IImage;
 }
 const props = defineProps<Props>();
-const emit = defineEmits(['editPosition', 'editTextPosition']);
+const emit = defineEmits([
+  'editPosition',
+  'editTitlePosition',
+  'editTextPosition',
+  'editParagraphWidth'
+]);
 
-const position = computed(() => props.entityData.image_position);
+const position = computed(() => props.entityData.entity_position);
+const titlePosition = computed(() => props.entityData.entity_title_position);
 
 const speedDialMove = computed(() => {
-  const state = [];
+  let state = [];
   switch (position.value) {
     case 'left':
       state.push({
@@ -70,6 +76,43 @@ const speedDialMove = computed(() => {
       command: () => changeOrderHomeEntity(props.entityData.entity_uuid, 'down')
     });
   }
+  switch (titlePosition.value) {
+    case 'left':
+      state.push({
+        label: 'Title center',
+        icon: 'pi pi-align-center',
+        command: () => emit('editTitlePosition', 'center')
+      });
+      state.push({
+        label: 'Title right',
+        icon: 'pi pi-align-right',
+        command: () => emit('editTitlePosition', 'right')
+      });
+      break;
+    case 'center':
+      state.push({
+        label: 'Title left',
+        icon: 'pi pi-align-left',
+        command: () => emit('editTitlePosition', 'left')
+      });
+      state.push({
+        label: 'Title right',
+        icon: 'pi pi-align-right',
+        command: () => emit('editTitlePosition', 'right')
+      });
+      break;
+    case 'right':
+      state.push({
+        label: 'Title left',
+        icon: 'pi pi-align-left',
+        command: () => emit('editTitlePosition', 'left')
+      });
+      state.push({
+        label: 'Title center',
+        icon: 'pi pi-align-center',
+        command: () => emit('editTitlePosition', 'center')
+      });
+  }
   if (props.entityData?.text || props.entityData?.text === '') {
     if (props.entityData?.text_position === 'right') {
       state.push({
@@ -85,12 +128,29 @@ const speedDialMove = computed(() => {
       });
     }
   }
+  const paragraphSize = props.entityData?.paragraph_size;
+  if (paragraphSize) {
+    if (paragraphSize === 'full') {
+      state = state.filter(
+        (item) => item.label !== 'Left' && item.label !== 'Center' && item.label !== 'Right'
+      );
+      state.push({
+        label: 'Text half width',
+        command: () => emit('editParagraphWidth', 'half')
+      });
+    } else {
+      state.push({
+        label: 'Text full width',
+        command: () => emit('editParagraphWidth', 'full')
+      });
+    }
+  }
   return state;
 });
 </script>
 
 <template>
-  <div>
+  <div class="h-12">
     <SpeedDial :model="speedDialMove" direction="right" pt:root:class="speedDialRoot w-4">
       <template #button="{ toggleCallback }">
         <button
@@ -105,7 +165,7 @@ const speedDialMove = computed(() => {
           :class="[
             'flex flex-col bg-black bg-opacity-80 items-center justify-between -translate-8 gap-2 p-2 border rounded border-surface-200 dark:border-surface-700 w-20 cursor-pointer',
             {
-              'text-red-400 font-semibold': item.icon.includes('trash')
+              'text-red-400 font-semibold': item?.icon?.includes('trash')
             }
           ]"
           @click="toggleCallback"
diff --git a/src/components/editEntityMenu/ImageSizeMenu.vue b/src/components/editEntityMenu/ImageSizeMenu.vue
index 127da3a..400207f 100644
--- a/src/components/editEntityMenu/ImageSizeMenu.vue
+++ b/src/components/editEntityMenu/ImageSizeMenu.vue
@@ -5,28 +5,24 @@ interface Props {
   entityData: IImage;
 }
 const props = defineProps<Props>();
-const emit = defineEmits(['scaleImage', 'editTextPosition']);
+const emit = defineEmits(['scaleImage']);
 
 const speedDialSize = computed(() => {
   let state = [
     {
       label: 'x0.25',
-      icon: 'pi pi-arrow-down-left-and-arrow-up-right-to-center',
       command: () => emit('scaleImage', '0.25')
     },
     {
       label: 'x0.5',
-      icon: 'pi pi-arrow-down-left-and-arrow-up-right-to-center',
       command: () => emit('scaleImage', '0.5')
     },
     {
       label: 'x0.75',
-      icon: 'pi pi-arrow-down-left-and-arrow-up-right-to-center',
       command: () => emit('scaleImage', '0.75')
     },
     {
       label: 'x1',
-      icon: 'pi pi-arrow-down-left-and-arrow-up-right-to-center',
       command: () => emit('scaleImage', '1')
     }
   ];
@@ -36,40 +32,49 @@ const speedDialSize = computed(() => {
   );
   if (initialImageWidth <= 400 || initialImageHeight <= 400) {
     state = state.filter((item) => item.label !== 'x0.25');
-    if (initialImageWidth <= 200 || initialImageHeight <= 200) {
+    if (
+      initialImageWidth <= 200 ||
+      initialImageHeight <= 200 ||
+      (initialImageWidth >= 1600 && props.entityData.text_position)
+    ) {
       state = state.filter((item) => item.label !== 'x0.5');
-      if (initialImageWidth <= 95 || initialImageHeight <= 95) {
+      if (
+        initialImageWidth <= 95 ||
+        initialImageHeight <= 95 ||
+        (initialImageWidth >= 1066 && props.entityData.text_position)
+      ) {
         state = state.filter((item) => item.label !== 'x0.75');
       }
     }
   }
+  if (
+    (initialImageWidth >= 800 && props.entityData.text_position) ||
+    props.entityData.image_width < initialImageWidth
+  ) {
+    state = state.filter((item) => item.label !== 'x1');
+  }
   return state.filter((item) => item.label !== `x${props.entityData.image_scale}`);
 });
 const speedDialSizeBigger = computed(() => {
   let state = [
     {
       label: 'x1',
-      icon: 'pi pi-pencil',
       command: () => emit('scaleImage', '1')
     },
     {
       label: 'x1.25',
-      icon: 'pi pi-pencil',
       command: () => emit('scaleImage', '1.25')
     },
     {
       label: 'x1.5',
-      icon: 'pi pi-pencil',
       command: () => emit('scaleImage', '1.5')
     },
     {
       label: 'x1.75',
-      icon: 'pi pi-pencil',
       command: () => emit('scaleImage', '1.75')
     },
     {
       label: 'x2',
-      icon: 'pi pi-pencil',
       command: () => emit('scaleImage', '2')
     }
   ];
@@ -77,13 +82,35 @@ const speedDialSizeBigger = computed(() => {
   const initialImageHeight = Math.ceil(
     props.entityData.image_height / +props.entityData.image_scale
   );
-  if (initialImageWidth >= 960 || initialImageHeight >= 960) {
+  if (
+    (initialImageWidth >= 800 && props.entityData.text_position) ||
+    props.entityData.image_width > initialImageWidth
+  ) {
+    state = state.filter((item) => item.label !== 'x1');
+  }
+  if (
+    initialImageWidth >= 960 ||
+    initialImageHeight >= 960 ||
+    (initialImageWidth >= 640 && props.entityData.text_position)
+  ) {
     state = state.filter((item) => item.label !== 'x1.25');
-    if (initialImageWidth >= 800 || initialImageHeight >= 800) {
+    if (
+      initialImageWidth >= 800 ||
+      initialImageHeight >= 800 ||
+      (initialImageWidth >= 533 && props.entityData.text_position)
+    ) {
       state = state.filter((item) => item.label !== 'x1.5');
-      if (initialImageWidth >= 685 || initialImageHeight >= 685) {
+      if (
+        initialImageWidth >= 685 ||
+        initialImageHeight >= 685 ||
+        (initialImageWidth >= 457 && props.entityData.text_position)
+      ) {
         state = state.filter((item) => item.label !== 'x1.75');
-        if (initialImageWidth >= 600 || initialImageHeight >= 600) {
+        if (
+          initialImageWidth >= 600 ||
+          initialImageHeight >= 600 ||
+          (initialImageWidth >= 400 && props.entityData.text_position)
+        ) {
           state = state.filter((item) => item.label !== 'x2');
         }
       }
diff --git a/src/components/editEntityMenu/ImageStateMenu.vue b/src/components/editEntityMenu/ImageStateMenu.vue
index 879815f..203a6c0 100644
--- a/src/components/editEntityMenu/ImageStateMenu.vue
+++ b/src/components/editEntityMenu/ImageStateMenu.vue
@@ -32,11 +32,13 @@ const speedDialState = computed(() => {
     });
   }
   if (!props.entityData?.text && props.entityData?.text !== '') {
-    state.push({
-      label: 'Text',
-      icon: 'pi pi-pencil',
-      command: () => emit('addText')
-    });
+    if (props.entityData.image_width < 800) {
+      state.push({
+        label: 'Text',
+        icon: 'pi pi-pencil',
+        command: () => emit('addText')
+      });
+    }
   }
   if (props.entityData?.text || props.entityData?.text === '') {
     state.push({
@@ -62,7 +64,7 @@ const speedDialState = computed(() => {
 </script>
 
 <template>
-  <div>
+  <div class="relative z-50">
     <SpeedDial
       :model="speedDialState"
       direction="right"
diff --git a/src/components/editEntityMenu/TextFontMenu.vue b/src/components/editEntityMenu/TextFontMenu.vue
new file mode 100644
index 0000000..bd05bde
--- /dev/null
+++ b/src/components/editEntityMenu/TextFontMenu.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import type { IEntity } from '@/app/interfaces/environment';
+
+interface Props {
+  entityData: IEntity;
+}
+defineProps<Props>();
+const emit = defineEmits(['changeFontSize']);
+
+const speedDialSizeFont = computed(() => {
+  return [
+    {
+      label: 'Very small',
+      value: '16',
+      command: () => emit('changeFontSize', '16')
+    },
+    {
+      label: 'Small',
+      value: '20',
+      command: () => emit('changeFontSize', '20')
+    },
+    {
+      label: 'Medium',
+      value: '24',
+      command: () => emit('changeFontSize', '24')
+    },
+    {
+      label: 'Large',
+      value: '40',
+      command: () => emit('changeFontSize', '40')
+    },
+    {
+      label: 'Extra large',
+      value: '64',
+      command: () => emit('changeFontSize', '64')
+    }
+  ];
+});
+</script>
+
+<template>
+  <div class="h-12">
+    <SpeedDial
+      v-if="speedDialSizeFont.length"
+      :model="speedDialSizeFont"
+      direction="right"
+      showIcon="pi pi-arrows-h"
+      pt:root:class="speedDialRoot w-4"
+    >
+      <template #button="{ toggleCallback }">
+        <button
+          @click="toggleCallback"
+          class="border p-6 size-10 rounded-full bg-blue-500 flex items-center justify-center"
+        >
+          <p>
+            <span style="font-size: 1.5rem">T</span><span style="font-size: 1rem">T</span
+            ><span style="font-size: 0.6rem">T</span>
+          </p>
+        </button>
+      </template>
+      <template #item="{ item, toggleCallback }">
+        <div
+          :class="[
+            ' text-md font-semibold bg-opacity-70 items-center justify-between -translate-y-4 p-4 border rounded-md border-surface-200 dark:border-surface-700 cursor-pointer',
+            {
+              'bg-violet-500': item.label === 'Extra large',
+              'bg-red-500': item.label === 'Large',
+              'bg-yellow-500': item.label === 'Medium',
+              'bg-green-500': item.label === 'Small',
+              'bg-blue-500': item.label === 'Very small',
+              'opacity-50 cursor-not-allowed pointer-events-none':
+                item.value == entityData.font_size
+            }
+          ]"
+          @click="toggleCallback"
+        >
+          <div class="text-center">
+            {{ item.label }}
+          </div>
+        </div>
+      </template>
+    </SpeedDial>
+  </div>
+</template>
+
+<style>
+.speedDialRoot {
+  justify-content: flex-start !important;
+}
+</style>
diff --git a/src/components/editEntityMenu/TextMoveMenu.vue b/src/components/editEntityMenu/TextMoveMenu.vue
deleted file mode 100644
index 93f8bc8..0000000
--- a/src/components/editEntityMenu/TextMoveMenu.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<script setup lang="ts">
-import { changeOrderHomeEntity } from '@/app/helpers';
-import type { IText } from '@/app/interfaces/entities';
-import { useDataStore } from '@/app/stores/data';
-import type { IEntity } from '@/app/interfaces/environment';
-
-interface Props {
-  entityData: IText;
-}
-
-const props = defineProps<Props>();
-
-const speedDialMove = computed(() => {
-  const state = [];
-  const dataStore = useDataStore();
-  const entities = dataStore.homeEntities;
-  const entityIndex = entities.findIndex(
-    (entity: IEntity) => entity.entity_uuid === props.entityData.entity_uuid
-  );
-  if (entityIndex !== 0) {
-    state.push({
-      label: 'Up',
-      icon: 'pi pi-arrow-up',
-      command: () => changeOrderHomeEntity(props.entityData.entity_uuid, 'up')
-    });
-  }
-  if (entityIndex !== entities.length - 1) {
-    state.push({
-      label: 'Down',
-      icon: 'pi pi-arrow-down',
-      command: () => changeOrderHomeEntity(props.entityData.entity_uuid, 'down')
-    });
-  }
-  return state;
-});
-</script>
-
-<template>
-  <div>
-    <SpeedDial :model="speedDialMove" direction="right" pt:root:class="speedDialRoot size-12">
-      <template #button="{ toggleCallback }">
-        <button
-          class="border p-6 size-10 rounded-full bg-blue-500 flex items-center justify-center"
-          @click="toggleCallback"
-        >
-          <i class="pi pi-arrows-alt"></i>
-        </button>
-      </template>
-      <template #item="{ item, toggleCallback }">
-        <div
-          :class="[
-            'flex flex-col bg-black bg-opacity-80 items-center justify-between -translate-8 gap-2 p-2 border rounded border-surface-200 dark:border-surface-700 w-20 cursor-pointer',
-            {
-              'text-red-400 font-semibold': item.icon.includes('trash')
-            }
-          ]"
-          @click="toggleCallback"
-        >
-          <span :class="item.icon" />
-          <span class="text-center">
-            {{ item.label }}
-          </span>
-        </div>
-      </template>
-    </SpeedDial>
-  </div>
-</template>
-
-<style>
-.speedDialRoot {
-  justify-content: flex-start !important;
-}
-</style>
diff --git a/src/components/editEntityMenu/TextPositionMenu.vue b/src/components/editEntityMenu/TextPositionMenu.vue
new file mode 100644
index 0000000..563f2a7
--- /dev/null
+++ b/src/components/editEntityMenu/TextPositionMenu.vue
@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { changeOrderHomeEntity } from '@/app/helpers';
+import type { IText } from '@/app/interfaces/entities';
+import { useDataStore } from '@/app/stores/data';
+import type { IEntity } from '@/app/interfaces/environment';
+
+interface Props {
+  entityData: IText;
+}
+const props = defineProps<Props>();
+const emit = defineEmits(['editParagraphWidth', 'editPosition', 'editTitlePosition']);
+
+const position = computed(() => props.entityData.entity_position);
+const titlePosition = computed(() => props.entityData.entity_title_position);
+
+const speedDialMove = computed(() => {
+  let state = [];
+  switch (titlePosition.value) {
+    case 'left':
+      state.push({
+        label: 'Title center',
+        icon: 'pi pi-align-center',
+        command: () => emit('editTitlePosition', 'center')
+      });
+      state.push({
+        label: 'Title right',
+        icon: 'pi pi-align-right',
+        command: () => emit('editTitlePosition', 'right')
+      });
+      break;
+    case 'center':
+      state.push({
+        label: 'Title left',
+        icon: 'pi pi-align-left',
+        command: () => emit('editTitlePosition', 'left')
+      });
+      state.push({
+        label: 'Title right',
+        icon: 'pi pi-align-right',
+        command: () => emit('editTitlePosition', 'right')
+      });
+      break;
+    case 'right':
+      state.push({
+        label: 'Title left',
+        icon: 'pi pi-align-left',
+        command: () => emit('editTitlePosition', 'left')
+      });
+      state.push({
+        label: 'Title center',
+        icon: 'pi pi-align-center',
+        command: () => emit('editTitlePosition', 'center')
+      });
+  }
+  switch (position.value) {
+    case 'left':
+      state.push({
+        label: 'Center',
+        icon: 'pi pi-align-center',
+        command: () => emit('editPosition', 'center')
+      });
+      state.push({
+        label: 'Right',
+        icon: 'pi pi-arrow-right',
+        command: () => emit('editPosition', 'right')
+      });
+      break;
+    case 'center':
+      state.push({
+        label: 'Left',
+        icon: 'pi pi-arrow-left',
+        command: () => emit('editPosition', 'left')
+      });
+      state.push({
+        label: 'Right',
+        icon: 'pi pi-arrow-right',
+        command: () => emit('editPosition', 'right')
+      });
+      break;
+    case 'right':
+      state.push({
+        label: 'Left',
+        icon: 'pi pi-arrow-left',
+        command: () => emit('editPosition', 'left')
+      });
+      state.push({
+        label: 'Center',
+        icon: 'pi pi-align-center',
+        command: () => emit('editPosition', 'center')
+      });
+  }
+  const dataStore = useDataStore();
+  const entities = dataStore.homeEntities;
+  const entityIndex = entities.findIndex(
+    (entity: IEntity) => entity.entity_uuid === props.entityData.entity_uuid
+  );
+  if (entityIndex !== 0) {
+    state.push({
+      label: 'Up',
+      icon: 'pi pi-arrow-up',
+      command: () => changeOrderHomeEntity(props.entityData.entity_uuid, 'up')
+    });
+  }
+  if (entityIndex !== entities.length - 1) {
+    state.push({
+      label: 'Down',
+      icon: 'pi pi-arrow-down',
+      command: () => changeOrderHomeEntity(props.entityData.entity_uuid, 'down')
+    });
+  }
+  if (props.entityData.paragraph_size === 'full') {
+    state = state.filter(
+      (item) => item.label !== 'Left' && item.label !== 'Center' && item.label !== 'Right'
+    );
+    state.push({
+      label: 'Text half width',
+      command: () => emit('editParagraphWidth', 'half')
+    });
+  } else {
+    state.push({
+      label: 'Text full width',
+      command: () => emit('editParagraphWidth', 'full')
+    });
+  }
+  return state;
+});
+</script>
+
+<template>
+  <div>
+    <SpeedDial :model="speedDialMove" direction="right" pt:root:class="speedDialRoot size-12">
+      <template #button="{ toggleCallback }">
+        <button
+          class="border p-6 size-10 rounded-full bg-blue-500 flex items-center justify-center"
+          @click="toggleCallback"
+        >
+          <i class="pi pi-arrows-alt"></i>
+        </button>
+      </template>
+      <template #item="{ item, toggleCallback }">
+        <div
+          :class="[
+            'flex flex-col bg-black bg-opacity-80 items-center justify-between -translate-8 gap-2 p-2 border rounded border-surface-200 dark:border-surface-700 w-20 cursor-pointer',
+            {
+              'text-red-400 font-semibold': item?.icon?.includes('trash')
+            }
+          ]"
+          @click="toggleCallback"
+        >
+          <span :class="item.icon" />
+          <span class="text-center">
+            {{ item.label }}
+          </span>
+        </div>
+      </template>
+    </SpeedDial>
+  </div>
+</template>
+
+<style>
+.speedDialRoot {
+  justify-content: flex-start !important;
+}
+</style>
diff --git a/src/components/editEntityMenu/TextStateMenu.vue b/src/components/editEntityMenu/TextStateMenu.vue
index b4c9700..5ea5e59 100644
--- a/src/components/editEntityMenu/TextStateMenu.vue
+++ b/src/components/editEntityMenu/TextStateMenu.vue
@@ -36,7 +36,7 @@ const speedDialState = computed(() => {
 </script>
 
 <template>
-  <div>
+  <div class="relative z-50">
     <SpeedDial :model="speedDialState" direction="right" pt:root:class="speedDialRoot size-12">
       <template #button="{ toggleCallback }">
         <button
diff --git a/src/modules/entities/ImageItem.vue b/src/modules/entities/ImageItem.vue
index 938f4ee..7ae7750 100644
--- a/src/modules/entities/ImageItem.vue
+++ b/src/modules/entities/ImageItem.vue
@@ -2,11 +2,12 @@
 import type { IImage } from '@/app/interfaces/entities';
 import { deleteEntity, editEntity } from '@/app/helpers';
 import { useDataStore } from '@/app/stores/data';
-import { useElementSize, useTextareaAutosize, useVModel } from '@vueuse/core';
-import MoveMenu from '@/components/editEntityMenu/ImageMoveMenu.vue';
+import { useVModel, useWindowSize } from '@vueuse/core';
+import PositionMenu from '@/components/editEntityMenu/ImagePositionMenu.vue';
 import StateMenu from '@/components/editEntityMenu/ImageStateMenu.vue';
 import CropImageModal from '@/modules/CropImageModal.vue';
 import SizeMenu from '@/components/editEntityMenu/ImageSizeMenu.vue';
+import FontMenu from '@/components/editEntityMenu/TextFontMenu.vue';
 
 interface Props {
   entityData: IImage;
@@ -15,9 +16,6 @@ const props = defineProps<Props>();
 const emit = defineEmits(['update:entityData']);
 const entityData = useVModel(props, 'entityData', emit);
 
-const imageContainer = ref();
-const { height: imageHeight } = useElementSize(imageContainer);
-
 function editTitle() {
   editEntity({ ...entityData.value, title: entityData.value.title }, entityData.value.entity_uuid);
 }
@@ -25,8 +23,11 @@ const editText = () => {
   editEntity({ ...entityData.value, text: entityData.value.text }, entityData.value.entity_uuid);
 };
 function addTitle() {
-  editEntity({ ...entityData.value, title: 'Title' }, entityData.value.entity_uuid);
-  entityData.value = { ...entityData.value, title: 'Title' };
+  editEntity(
+    { ...entityData.value, title: 'Title', entity_title_position: 'center' },
+    entityData.value.entity_uuid
+  );
+  entityData.value = { ...entityData.value, title: 'Title', entity_title_position: 'center' };
 }
 function removeTitle() {
   const newState = { ...entityData.value };
@@ -40,8 +41,8 @@ function addText() {
       ...entityData.value,
       text: 'Text',
       text_position: 'right',
-      text_size: 'medium',
-      paragraph_size: 'medium'
+      font_size: '20',
+      paragraph_size: 'full'
     },
     entityData.value.entity_uuid
   );
@@ -51,19 +52,30 @@ function removeText() {
   const newState = { ...entityData.value };
   newState.text = null;
   newState.text_position = null;
-  newState.text_size = null;
+  newState.font_size = null;
   newState.paragraph_size = null;
   editEntity({ ...newState }, entityData.value.entity_uuid);
   entityData.value = newState;
 }
 function editPosition(position: 'left' | 'center' | 'right') {
-  entityData.value.image_position = position;
-  editEntity({ ...entityData.value, image_position: position }, entityData.value.entity_uuid);
+  entityData.value.entity_position = position;
+  editEntity({ ...entityData.value, entity_position: position }, entityData.value.entity_uuid);
+}
+function editTitlePosition(position: 'left' | 'center' | 'right') {
+  entityData.value.entity_title_position = position;
+  editEntity(
+    { ...entityData.value, entity_title_position: position },
+    entityData.value.entity_uuid
+  );
 }
 function editTextPosition(position: 'left' | 'right') {
   entityData.value.text_position = position;
   editEntity({ ...entityData.value, text_position: position }, entityData.value.entity_uuid);
 }
+function editParagraphWidth(widthMode: 'full' | 'half') {
+  entityData.value.paragraph_size = widthMode;
+  editEntity({ ...entityData.value, paragraph_size: widthMode }, entityData.value.entity_uuid);
+}
 const dataStore = useDataStore();
 const homeEntities = computed(() => dataStore.homeEntities);
 
@@ -78,6 +90,7 @@ function saveImage(newUrl: string, newWidth: number, newHeight: number) {
   editEntity({ ...entityData.value }, entityData.value.entity_uuid);
   isModalCropImage.value = false;
 }
+
 function scaleImage(scale: string) {
   const initialWidth = Math.ceil(entityData.value.image_width / +entityData.value.image_scale);
   entityData.value.image_width = initialWidth * +scale;
@@ -86,7 +99,17 @@ function scaleImage(scale: string) {
   entityData.value.image_scale = scale;
   editEntity({ ...entityData.value }, entityData.value.entity_uuid);
 }
-const { textarea, triggerResize } = useTextareaAutosize({ styleProp: 'minHeight' });
+function changeFontSize(newSize: '16' | '20' | '24' | '40' | '64') {
+  entityData.value.font_size = newSize;
+  editEntity({ ...entityData.value, font_size: newSize }, entityData.value.entity_uuid);
+}
+
+const { width: windowWidth } = useWindowSize();
+const textContainerWidth = computed(() => {
+  if (entityData.value?.paragraph_size === 'half')
+    return (windowWidth.value - 150 - entityData.value.image_width) / 2;
+  return windowWidth.value - 150 - entityData.value.image_width;
+});
 </script>
 
 <template>
@@ -94,9 +117,9 @@ const { textarea, triggerResize } = useTextareaAutosize({ styleProp: 'minHeight'
     :class="[
       'entityContainer relative flex py-8 px-16',
       {
-        'justify-start': entityData.image_position === 'left',
-        'justify-center': entityData.image_position === 'center',
-        'justify-end': entityData.image_position === 'right'
+        'justify-start': entityData.entity_position === 'left',
+        'justify-center': entityData.entity_position === 'center',
+        'justify-end': entityData.entity_position === 'right'
       }
     ]"
   >
@@ -113,11 +136,17 @@ const { textarea, triggerResize } = useTextareaAutosize({ styleProp: 'minHeight'
         v-model="entityData.title"
         @change="editTitle"
         placeholder="Enter title..."
-        class="w-full mb-4 font-bold text-2xl pl-2"
+        :style="`font-size: ${+entityData.font_size + 10}px`"
+        :class="[
+          'w-full mb-4 font-bold pl-2',
+          {
+            'text-center': entityData.entity_title_position === 'center',
+            'text-end': entityData.entity_title_position === 'right'
+          }
+        ]"
       />
-      <div class="flex gap-4">
+      <div class="flex gap-8" :style="`height: ${entityData.image_height}px`">
         <div
-          ref="imageContainer"
           :class="[
             'imageContainer relative leading-none min-h-[100px] min-w-[100px]',
             {
@@ -137,19 +166,24 @@ const { textarea, triggerResize } = useTextareaAutosize({ styleProp: 'minHeight'
             <SizeMenu :entityData="entityData" @scaleImage="scaleImage" />
           </div>
         </div>
-        <textarea
-          v-if="entityData.text_position"
-          ref="textarea"
-          v-model="entityData.text"
-          class="w-max block indent-5 resize-none outline-0 order-2"
-          @change="editText"
-          @input="triggerResize"
-          placeholder="Enter text..."
-          rows="2"
-          cols="50"
-        />
+        <div
+          class="textContainer relative leading-none"
+          :style="`width: ${textContainerWidth}px; height: ${entityData.image_height}px`"
+        >
+          <textarea
+            v-if="entityData.text_position"
+            ref="textarea"
+            v-model="entityData.text"
+            class="w-full indent-5 leading-normal overflow-auto resize-none outline-0 order-2"
+            @change="editText"
+            placeholder="Enter text..."
+            rows="7"
+            :style="`font-size: ${entityData.font_size}px; height: ${entityData.image_height}px;`"
+            spellcheck="false"
+          />
+        </div>
       </div>
-      <div class="speedDial absolute left-2 top-2 transition-all select-none">
+      <div class="speedDial absolute left-2 top-0 transition-all select-none">
         <StateMenu
           :entityData="entityData"
           @deleteEntity="deleteEntity"
@@ -160,14 +194,21 @@ const { textarea, triggerResize } = useTextareaAutosize({ styleProp: 'minHeight'
           @openUploadFileModal="openUploadFileModal"
         />
       </div>
+      <div
+        class="speedDial h-12 absolute left-2 top-1/2 -translate-y-1/2 transition-all select-none"
+      >
+        <FontMenu :entityData="entityData" @changeFontSize="changeFontSize" />
+      </div>
       <div
         v-if="homeEntities.length > 1"
-        class="speedDial absolute left-2 bottom-2 transition-all select-none"
+        class="speedDial absolute left-2 bottom-0 transition-all select-none"
       >
-        <MoveMenu
+        <PositionMenu
           :entityData="entityData"
           @editPosition="editPosition"
+          @editTitlePosition="editTitlePosition"
           @editTextPosition="editTextPosition"
+          @editParagraphWidth="editParagraphWidth"
         />
       </div>
     </div>
diff --git a/src/modules/entities/TextItem.vue b/src/modules/entities/TextItem.vue
index 6919646..826f055 100644
--- a/src/modules/entities/TextItem.vue
+++ b/src/modules/entities/TextItem.vue
@@ -4,7 +4,8 @@ import { useDataStore } from '@/app/stores/data';
 import { useTextareaAutosize } from '@vueuse/core';
 import { deleteEntity, editEntity } from '@/app/helpers';
 import StateMenu from '@/components/editEntityMenu/TextStateMenu.vue';
-import MoveMenu from '@/components/editEntityMenu/TextMoveMenu.vue';
+import PositionMenu from '@/components/editEntityMenu/TextPositionMenu.vue';
+import FontMenu from '@/components/editEntityMenu/TextFontMenu.vue';
 
 interface Props {
   entityData: IText;
@@ -13,8 +14,11 @@ const props = defineProps<Props>();
 const entityData = ref(props.entityData);
 
 const addTitle = () => {
-  editEntity({ ...entityData.value, title: 'Title' }, entityData.value.entity_uuid);
-  entityData.value = { ...entityData.value, title: 'Title' };
+  editEntity(
+    { ...entityData.value, title: 'Title', entity_title_position: 'center' },
+    entityData.value.entity_uuid
+  );
+  entityData.value = { ...entityData.value, title: 'Title', entity_title_position: 'center' };
 };
 
 const editTitle = () => {
@@ -36,41 +40,99 @@ const { textarea, triggerResize } = useTextareaAutosize({ styleProp: 'minHeight'
 
 const dataStore = useDataStore();
 const homeEntities = computed(() => dataStore.homeEntities);
+function editPosition(position: 'left' | 'center' | 'right') {
+  entityData.value.entity_position = position;
+  editEntity({ ...entityData.value, entity_position: position }, entityData.value.entity_uuid);
+}
+function editTitlePosition(position: 'left' | 'center' | 'right') {
+  entityData.value.entity_title_position = position;
+  editEntity(
+    { ...entityData.value, entity_title_position: position },
+    entityData.value.entity_uuid
+  );
+}
+function changeFontSize(newSize: '16' | '20' | '24' | '40' | '64') {
+  entityData.value.font_size = newSize;
+  editEntity({ ...entityData.value, font_size: newSize }, entityData.value.entity_uuid);
+}
+function editParagraphWidth(widthMode: 'full' | 'half') {
+  entityData.value.paragraph_size = widthMode;
+  editEntity({ ...entityData.value, paragraph_size: widthMode }, entityData.value.entity_uuid);
+}
 </script>
 
 <template>
-  <div class="entityContainer relative py-8 px-16">
-    <input
-      ref="input"
-      v-if="entityData.title || entityData.title === ''"
-      type="text"
-      v-model="entityData.title"
-      @change="editTitle"
-      placeholder="Enter title..."
-      class="w-full mb-4 font-bold text-2xl pl-2"
-    />
-    <textarea
-      ref="textarea"
-      v-model="entityData.text"
-      class="w-full indent-5 resize-none outline-0"
-      @change="editText"
-      @input="triggerResize"
-      placeholder="Enter text..."
-      rows="2"
-    />
-    <div class="speedDial absolute left-2 top-2 transition-all select-none">
-      <StateMenu
-        :entityData="entityData"
-        @deleteEntity="deleteEntity"
-        @addTitle="addTitle"
-        @removeTitle="removeTitle"
-      />
-    </div>
+  <div
+    :class="[
+      'entityContainer relative flex py-8 px-16',
+      {
+        'justify-start': entityData.entity_position === 'left',
+        'justify-center': entityData.entity_position === 'center',
+        'justify-end': entityData.entity_position === 'right'
+      }
+    ]"
+  >
     <div
-      v-if="homeEntities.length > 1"
-      class="speedDial absolute left-2 bottom-2 transition-all select-none"
+      :class="[
+        {
+          'w-1/2': entityData.paragraph_size === 'half',
+          'w-full': entityData.paragraph_size === 'full'
+        }
+      ]"
     >
-      <MoveMenu :entityData="entityData" />
+      <input
+        ref="input"
+        v-if="entityData.title || entityData.title === ''"
+        type="text"
+        v-model="entityData.title"
+        @change="editTitle"
+        placeholder="Enter title..."
+        :style="`font-size: ${+entityData.font_size + 10}px`"
+        :class="[
+          'w-full mb-4 font-bold text-6xl pl-2',
+          {
+            'text-center': entityData.entity_title_position === 'center',
+            'text-end': entityData.entity_title_position === 'right'
+          }
+        ]"
+      />
+      <div class="relative leading-none">
+        <textarea
+          ref="textarea"
+          v-model="entityData.text"
+          class="w-full indent-5 leading-normal resize-none outline-0"
+          :style="`font-size: ${entityData.font_size}px;`"
+          @change="editText"
+          @input="triggerResize"
+          placeholder="Enter text..."
+          rows="3"
+          spellcheck="false"
+        />
+      </div>
+      <div class="speedDial absolute left-2 top-0 transition-all select-none">
+        <StateMenu
+          :entityData="entityData"
+          @deleteEntity="deleteEntity"
+          @addTitle="addTitle"
+          @removeTitle="removeTitle"
+        />
+      </div>
+      <div
+        class="speedDial h-12 absolute left-2 top-1/2 -translate-y-1/2 transition-all select-none"
+      >
+        <FontMenu :entityData="entityData" @changeFontSize="changeFontSize" />
+      </div>
+      <div
+        v-if="homeEntities.length > 1"
+        class="speedDial absolute left-2 bottom-0 transition-all select-none"
+      >
+        <PositionMenu
+          :entityData="entityData"
+          @editPosition="editPosition"
+          @editTitlePosition="editTitlePosition"
+          @editParagraphWidth="editParagraphWidth"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -84,10 +146,10 @@ textarea {
 textarea::-webkit-scrollbar {
   display: none;
 }
-.entityContainer > .speedDial {
+.entityContainer .speedDial {
   opacity: 0;
 }
-.entityContainer:hover > .speedDial {
+.entityContainer:hover .speedDial {
   opacity: 100;
 }
 input::placeholder {
diff --git a/src/output.css b/src/output.css
index e15cbc3..b3632e3 100644
--- a/src/output.css
+++ b/src/output.css
@@ -588,6 +588,10 @@ video {
   }
 }
 
+.pointer-events-none {
+  pointer-events: none;
+}
+
 .\!visible {
   visibility: visible !important;
 }
@@ -616,8 +620,8 @@ video {
   top: -100%;
 }
 
-.bottom-2 {
-  bottom: 0.5rem;
+.bottom-0 {
+  bottom: 0px;
 }
 
 .left-0 {
@@ -628,6 +632,10 @@ video {
   left: 0.5rem;
 }
 
+.left-20 {
+  left: 5rem;
+}
+
 .right-2 {
   right: 0.5rem;
 }
@@ -636,6 +644,10 @@ video {
   top: 0px;
 }
 
+.top-1\/2 {
+  top: 50%;
+}
+
 .top-16 {
   top: 4rem;
 }
@@ -648,10 +660,6 @@ video {
   z-index: 50;
 }
 
-.z-\[100\] {
-  z-index: 100;
-}
-
 .order-1 {
   order: 1;
 }
@@ -752,9 +760,8 @@ video {
   height: 3rem;
 }
 
-.size-64 {
-  width: 16rem;
-  height: 16rem;
+.h-12 {
+  height: 3rem;
 }
 
 .h-\[1px\] {
@@ -773,6 +780,10 @@ video {
   min-height: 100px;
 }
 
+.w-1\/2 {
+  width: 50%;
+}
+
 .w-12 {
   width: 3rem;
 }
@@ -793,22 +804,22 @@ video {
   width: 100%;
 }
 
-.w-max {
-  width: -moz-max-content;
-  width: max-content;
-}
-
 .min-w-\[100px\] {
   min-width: 100px;
 }
 
+.-translate-y-1\/2 {
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .-translate-y-2 {
   --tw-translate-y: -0.5rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.-translate-y-6 {
-  --tw-translate-y: -1.5rem;
+.-translate-y-4 {
+  --tw-translate-y: -1rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
@@ -817,13 +828,12 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.-translate-y-4 {
-  --tw-translate-y: -1rem;
+.transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.transform {
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+.cursor-not-allowed {
+  cursor: not-allowed;
 }
 
 .cursor-pointer {
@@ -840,10 +850,6 @@ video {
   resize: none;
 }
 
-.resize {
-  resize: both;
-}
-
 .flex-col {
   flex-direction: column;
 }
@@ -872,20 +878,16 @@ video {
   justify-content: space-between;
 }
 
-.gap-12 {
-  gap: 3rem;
-}
-
 .gap-2 {
   gap: 0.5rem;
 }
 
-.gap-4 {
-  gap: 1rem;
+.gap-8 {
+  gap: 2rem;
 }
 
-.overflow-hidden {
-  overflow: hidden;
+.overflow-auto {
+  overflow: auto;
 }
 
 .rounded {
@@ -1064,6 +1066,10 @@ video {
   text-align: center;
 }
 
+.text-end {
+  text-align: end;
+}
+
 .indent-5 {
   text-indent: 1.25rem;
 }
@@ -1078,6 +1084,11 @@ video {
   line-height: 2.5rem;
 }
 
+.text-6xl {
+  font-size: 3.75rem;
+  line-height: 1;
+}
+
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
@@ -1100,6 +1111,10 @@ video {
   line-height: 1;
 }
 
+.leading-normal {
+  line-height: 1.5;
+}
+
 .text-gray-400 {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -1119,6 +1134,10 @@ video {
   opacity: 0;
 }
 
+.opacity-50 {
+  opacity: 0.5;
+}
+
 .outline-0 {
   outline-width: 0px;
 }
-- 
GitLab