From 09952c18946d467159487d76ed922e89d3bb4054 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Thu, 8 Aug 2024 15:53:29 +0500
Subject: [PATCH 1/3] refactor entityText

---
 components.d.ts                      |  5 +-
 src/components/entities/TextItem.vue | 68 ++++++++++++++++++----------
 src/helpers/index.ts                 | 11 +++++
 src/modules/EntityItem.vue           |  2 +-
 4 files changed, 58 insertions(+), 28 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index b5319bf..65ca4e7 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -2,7 +2,7 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-export {};
+export {}
 
 /* prettier-ignore */
 declare module 'vue' {
@@ -13,14 +13,11 @@ declare module 'vue' {
     Divider: typeof import('primevue/divider')['default']
     Drawer: typeof import('primevue/drawer')['default']
     LogoAndLabel: typeof import('./src/components/LogoAndLabel.vue')['default']
-    Popover: typeof import('primevue/popover')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    ScrollPanel: typeof import('primevue/scrollpanel')['default']
     SpeedDial: typeof import('primevue/speeddial')['default']
     Splitter: typeof import('primevue/splitter')['default']
     SplitterPanel: typeof import('primevue/splitterpanel')['default']
-    Textarea: typeof import('primevue/textarea')['default']
     TextItem: typeof import('./src/components/entities/TextItem.vue')['default']
     Tree: typeof import('primevue/tree')['default']
     UserInfoHeaderWithSettings: typeof import('./src/components/UserInfoHeaderWithSettings.vue')['default']
diff --git a/src/components/entities/TextItem.vue b/src/components/entities/TextItem.vue
index dd3b61e..a0d923a 100644
--- a/src/components/entities/TextItem.vue
+++ b/src/components/entities/TextItem.vue
@@ -2,7 +2,8 @@
 import type { IText } from '@/interfaces/entities';
 import type { IEntity } from '@/interfaces/environment';
 import { useDataStore } from '@/stores/data';
-import {useTextareaAutosize} from "@vueuse/core";
+import { useTextareaAutosize } from '@vueuse/core';
+import { editEntity } from '@/helpers';
 
 interface Props {
   entityData: IText;
@@ -12,53 +13,74 @@ const entityData = ref(props.entityData);
 
 const dataStore = useDataStore();
 
-const editEntity = (newState: IEntity) => {
-  let prevState = dataStore.homeEntities;
-  prevState = prevState.map((entity: IEntity) => {
-    if (entity.uuid !== entityData.value.uuid) return entity;
-    return newState;
-  });
-  dataStore.editHomeEntities(prevState);
-};
-
 const addTitle = () => {
-  editEntity({ ...entityData.value, title: 'Title' });
+  editEntity({ ...entityData.value, title: 'Title' }, entityData.value.uuid);
   entityData.value = { ...entityData.value, title: 'Title' };
 };
 
 const editTitle = () => {
-  editEntity({ ...entityData.value, title: entityData.value.title });
+  editEntity({ ...entityData.value, title: entityData.value.title }, entityData.value.uuid);
 };
 
 const editText = () => {
-  editEntity({ ...entityData.value, text: entityData.value.text });
+  editEntity({ ...entityData.value, text: entityData.value.text }, entityData.value.uuid);
 };
 
 const deleteEntity = () => {
   let prevState = dataStore.homeEntities;
   prevState = prevState.filter((entity: IEntity) => entity.uuid !== entityData.value.uuid);
   dataStore.editHomeEntities(prevState);
-}
-const { textarea, triggerResize  } = useTextareaAutosize();
+};
+
+const deleteTitle = () => {
+  const newState = { ...entityData.value };
+  delete newState.title;
+  editEntity({ ...newState }, entityData.value.uuid);
+  entityData.value = newState;
+};
+
+const { textarea, triggerResize } = useTextareaAutosize();
 </script>
 
 <template>
   <div class="textContainer relative">
-    <input ref="input" v-if="entityData?.title" type="text" v-model="entityData.title" @change="editTitle" @input="triggerResize" class="w-full mb-2 font-bold pl-2" />
-    <textarea ref="textarea" v-model="entityData.text" class="w-full indent-5 resize-none pl-4 -ml-4 border-0 border-l-4 border-solid border-l-blue-400" @change="editText" @input="triggerResize" placeholder="Enter text..."/>
+    <input
+      ref="input"
+      v-if="entityData.title"
+      type="text"
+      v-model="entityData.title"
+      @change="editTitle"
+      @input="triggerResize"
+      class="w-full mb-2 font-bold pl-2"
+    />
+    <textarea
+      ref="textarea"
+      v-model="entityData.text"
+      class="w-full indent-5 resize-none pl-4 -ml-4 border-0 border-l-4 border-solid border-l-blue-400"
+      @change="editText"
+      @input="triggerResize"
+      placeholder="Enter text..."
+    />
     <button
-        v-if="!entityData.title"
-        @click.prevent="addTitle"
-        class="addTitleButton absolute top-0 left-4 bg-blue-500 py-0.5 px-2 rounded-md -translate-y-full border-2 border-solid border-black transition-all select-none"
+      v-if="!entityData?.title"
+      @click.prevent="addTitle"
+      class="addTitleButton absolute top-0 left-4 bg-blue-500 py-0.5 px-2 rounded-md -translate-y-full border-2 border-solid border-black transition-all select-none"
     >
       Add title
     </button>
     <button
-        @click.prevent="deleteEntity"
-        class="deleteEntityButton absolute top-0 right-4 bg-blue-500 py-0.5 px-2 rounded-md -translate-y-full border-2 border-solid border-black transition-all select-none"
+      @click.prevent="deleteEntity"
+      class="deleteEntityButton absolute top-0 right-4 bg-blue-500 py-0.5 px-2 rounded-md -translate-y-full border-2 border-solid border-black transition-all select-none"
     >
       <i class="pi pi-trash pr-2"></i>Delete
     </button>
+    <button
+      v-if="entityData?.title"
+      @click.prevent="deleteTitle"
+      class="deleteEntityButton absolute top-0 left-4 bg-blue-500 py-0.5 px-2 rounded-md -translate-y-full border-2 border-solid border-black transition-all select-none"
+    >
+      <i class="pi pi-trash pr-2"></i>Delete title
+    </button>
   </div>
 </template>
 
@@ -76,7 +98,7 @@ textarea::-webkit-scrollbar {
   opacity: 0;
 }
 .textContainer:hover > .addTitleButton,
-.textContainer:hover > .deleteEntityButton{
+.textContainer:hover > .deleteEntityButton {
   opacity: 100;
 }
 </style>
diff --git a/src/helpers/index.ts b/src/helpers/index.ts
index eb5badf..b53eb64 100644
--- a/src/helpers/index.ts
+++ b/src/helpers/index.ts
@@ -1,5 +1,6 @@
 import { useInterfaceStore } from '@/stores/interface';
 import type { IEntity } from '@/interfaces/environment';
+import { useDataStore } from '@/stores/data';
 
 export async function uploadFile($event: Event) {
   const target = $event.target as HTMLInputElement;
@@ -23,3 +24,13 @@ export function setDefaultHomeBackground() {
   );
   localStorage.removeItem('homeBackgroundUrl');
 }
+
+export const editEntity = (newState: IEntity, entityUuid: string) => {
+  const dataStore = useDataStore();
+  let prevState = dataStore.homeEntities;
+  prevState = prevState.map((entity: IEntity) => {
+    if (entity.uuid !== entityUuid) return entity;
+    return newState;
+  });
+  dataStore.editHomeEntities(prevState);
+};
diff --git a/src/modules/EntityItem.vue b/src/modules/EntityItem.vue
index b273298..f485f61 100644
--- a/src/modules/EntityItem.vue
+++ b/src/modules/EntityItem.vue
@@ -10,7 +10,7 @@ defineProps<Props>();
 
 <template>
   <div>
-    <TextItem v-if="entity.type === 'text'" :entityData="entity"/>
+    <TextItem v-if="entity.type === 'text'" :entityData="entity" />
   </div>
 </template>
 
-- 
GitLab


From db2d477ff2d0692baf5a8bb9b16803d2baa65892 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Sat, 10 Aug 2024 12:32:46 +0500
Subject: [PATCH 2/3] feature to add image entity

---
 components.d.ts                        |   4 +
 package.json                           |   1 +
 src/components/CreateEntityMenu.vue    |  40 +++++-
 src/components/EditImageEntityMenu.vue | 189 +++++++++++++++++++++++++
 src/components/entities/ImageItem.vue  | 122 ++++++++++++++++
 src/helpers/index.ts                   |  25 ++++
 src/interfaces/entities.ts             |   3 +-
 src/modules/EntityItem.vue             |   2 +
 src/output.css                         | 119 +++++++++++++---
 src/pages/HomePage.vue                 |  11 +-
 yarn.lock                              |  31 ++++
 11 files changed, 513 insertions(+), 34 deletions(-)
 create mode 100644 src/components/EditImageEntityMenu.vue
 create mode 100644 src/components/entities/ImageItem.vue

diff --git a/components.d.ts b/components.d.ts
index 65ca4e7..88454d3 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -12,6 +12,9 @@ declare module 'vue' {
     CreateEntityMenu: typeof import('./src/components/CreateEntityMenu.vue')['default']
     Divider: typeof import('primevue/divider')['default']
     Drawer: typeof import('primevue/drawer')['default']
+    EditImageEntityMenu: typeof import('./src/components/EditImageEntityMenu.vue')['default']
+    EditTextEntityMenu: typeof import('./src/components/EditTextEntityMenu.vue')['default']
+    ImageItem: typeof import('./src/components/entities/ImageItem.vue')['default']
     LogoAndLabel: typeof import('./src/components/LogoAndLabel.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
@@ -19,6 +22,7 @@ declare module 'vue' {
     Splitter: typeof import('primevue/splitter')['default']
     SplitterPanel: typeof import('primevue/splitterpanel')['default']
     TextItem: typeof import('./src/components/entities/TextItem.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/package.json b/package.json
index 0b289c8..15be684 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@primevue/themes": "^4.0.4",
+    "@vueuse/components": "^10.11.1",
     "@vueuse/core": "^10.11.0",
     "@vueuse/integrations": "^10.11.0",
     "pinia": "^2.1.7",
diff --git a/src/components/CreateEntityMenu.vue b/src/components/CreateEntityMenu.vue
index 8f1f99f..2c70aad 100644
--- a/src/components/CreateEntityMenu.vue
+++ b/src/components/CreateEntityMenu.vue
@@ -1,8 +1,42 @@
 <script setup lang="ts">
 import { v4 as uuidv4 } from 'uuid';
+import { useFileDialog } from '@vueuse/core';
+import { useInterfaceStore } from '@/stores/interface';
 
 const emit = defineEmits(['addEntity']);
 
+const {
+  files,
+  open: uploadFile,
+  reset,
+  onChange
+} = useFileDialog({
+  accept: 'image/*'
+});
+
+const addImage = (files: FileList) => {
+  console.log('files', files);
+
+  const file = files[0];
+  const reader = new FileReader();
+  reader.readAsDataURL(file);
+  reader.addEventListener('load', () => {
+    const url = reader.result;
+    emit('addEntity', {
+      type: 'image',
+      uuid: uuidv4(),
+      url,
+      position: 'left',
+      height: 300
+    });
+  });
+};
+onChange((files) => {
+  if (files && files?.length > 0) {
+    addImage(files);
+  }
+});
+
 const speedDialItems = ref([
   {
     label: 'Text',
@@ -19,10 +53,8 @@ const speedDialItems = ref([
     label: 'Image',
     icon: 'pi pi-image',
     command: () => {
-      emit('addEntity', {
-        type: 'image',
-        uuid: uuidv4()
-      });
+      uploadFile();
+      console.log('uploadFile finished');
     }
   },
   {
diff --git a/src/components/EditImageEntityMenu.vue b/src/components/EditImageEntityMenu.vue
new file mode 100644
index 0000000..8651fab
--- /dev/null
+++ b/src/components/EditImageEntityMenu.vue
@@ -0,0 +1,189 @@
+<script setup lang="ts">
+import { changeOrderHomeEntity, deleteEntity } from '@/helpers';
+import type { IImage } from '@/interfaces/entities';
+import { useDataStore } from '@/stores/data';
+import type { IEntity } from '@/interfaces/environment';
+
+interface Props {
+  entityData: IImage;
+  isResizable: boolean;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits([
+  'deleteEntity',
+  'addTitle',
+  'removeTitle',
+  'editPosition',
+  'toggleIsResizable'
+]);
+
+const isResizable = computed(() => props.isResizable);
+const position = computed(() => props.entityData.position);
+
+const speedDialState = computed(() => {
+  const state = [];
+  if (!props.entityData?.title && props.entityData?.title !== '') {
+    state.push({
+      label: 'Add title',
+      icon: 'pi pi-pencil',
+      command: () => emit('addTitle')
+    });
+  }
+  if (props.entityData?.title || props.entityData?.title === '') {
+    state.push({
+      label: 'Remove title',
+      icon: 'pi pi-trash',
+      command: () => emit('removeTitle')
+    });
+  }
+  if (position.value !== 'right') {
+    state.push({
+      label: !isResizable.value ? 'Resize' : 'Stop resize',
+      icon: 'pi pi-arrow-up-right-and-arrow-down-left-from-center',
+      command: () => emit('toggleIsResizable')
+    });
+  }
+  state.push({
+    label: 'Delete',
+    icon: 'pi pi-trash',
+    command: () => deleteEntity(props.entityData.uuid)
+  });
+  return state;
+});
+
+const speedDialMove = computed(() => {
+  const state = [];
+  switch (position.value) {
+    case 'left':
+      state.push({
+        label: 'Move to center',
+        icon: 'pi pi-align-center',
+        command: () => emit('editPosition', 'center')
+      });
+      state.push({
+        label: 'Move right',
+        icon: 'pi pi-arrow-right',
+        command: () => emit('editPosition', 'right')
+      });
+      break;
+    case 'center':
+      state.push({
+        label: 'Move left',
+        icon: 'pi pi-arrow-left',
+        command: () => emit('editPosition', 'left')
+      });
+      state.push({
+        label: 'Move right',
+        icon: 'pi pi-arrow-right',
+        command: () => emit('editPosition', 'right')
+      });
+      break;
+    case 'right':
+      state.push({
+        label: 'Move left',
+        icon: 'pi pi-arrow-left',
+        command: () => emit('editPosition', 'left')
+      });
+      state.push({
+        label: 'Move to center',
+        icon: 'pi pi-align-center',
+        command: () => emit('editPosition', 'center')
+      });
+  }
+  const dataStore = useDataStore();
+  const entities = dataStore.homeEntities;
+  const entityIndex = entities.findIndex(
+    (entity: IEntity) => entity.uuid === props.entityData.uuid
+  );
+  if (entityIndex !== 0) {
+    state.push({
+      label: 'Move up',
+      icon: 'pi pi-arrow-up',
+      command: () => changeOrderHomeEntity(props.entityData.uuid, 'up')
+    });
+  }
+  if (entityIndex !== entities.length - 1) {
+    state.push({
+      label: 'Move down',
+      icon: 'pi pi-arrow-down',
+      command: () => changeOrderHomeEntity(props.entityData.uuid, 'down')
+    });
+  }
+  return state;
+});
+</script>
+
+<template>
+  <div class="relative">
+    <SpeedDial
+      :model="speedDialState"
+      direction="right"
+      pt:root:class="speedDialRoot w-4"
+      class="absolute"
+    >
+      <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-pen-to-square"></i>
+        </button>
+      </template>
+      <template #item="{ item, toggleCallback }">
+        <div
+          :class="[
+            ' flex flex-col bg-black bg-opacity-70 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>
+    <SpeedDial
+      v-if="!isResizable"
+      :model="speedDialMove"
+      direction="right"
+      pt:root:class="speedDialRoot w-4"
+    >
+      <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-70 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/entities/ImageItem.vue b/src/components/entities/ImageItem.vue
new file mode 100644
index 0000000..d9c5870
--- /dev/null
+++ b/src/components/entities/ImageItem.vue
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import type { IImage } from '@/interfaces/entities';
+import { deleteEntity, editEntity } from '@/helpers';
+import EditImageEntityMenu from '@/components/EditImageEntityMenu.vue';
+import { useDataStore } from '@/stores/data';
+import { useElementSize } from '@vueuse/core';
+
+interface Props {
+  entityData: IImage;
+}
+const props = defineProps<Props>();
+const entityData = ref(props.entityData);
+
+const dataStore = useDataStore();
+const entities = computed(() => dataStore.homeEntities);
+
+const imageContainer = ref();
+const { width: imageWidth, height: imageHeight } = useElementSize(imageContainer);
+
+const editTitle = () => {
+  editEntity({ ...entityData.value, title: entityData.value.title }, entityData.value.uuid);
+};
+
+const addTitle = () => {
+  imageHeight.value = imageHeight.value + 48;
+  console.log('imageHeight.value', imageHeight.value);
+  editEntity(
+    { ...entityData.value, title: 'Title', height: imageHeight.value },
+    entityData.value.uuid
+  );
+  entityData.value = { ...entityData.value, title: 'Title' };
+};
+const removeTitle = () => {
+  const newState = { ...entityData.value };
+  delete newState.title;
+  imageHeight.value = imageHeight.value - 48;
+  editEntity({ ...newState, height: imageHeight.value }, entityData.value.uuid);
+  entityData.value = newState;
+};
+
+const isResizable = defineModel({ default: false });
+const toggleIsResizable = () => {
+  isResizable.value = !isResizable.value;
+  if (!isResizable.value) {
+    editEntity(
+      { ...entityData.value, height: imageHeight.value, width: imageWidth.value },
+      entityData.value.uuid
+    );
+    console.log(entityData.value);
+  }
+};
+const editPosition = (position: 'left' | 'center' | 'right') => {
+  entityData.value.position = position;
+  editEntity({ ...entityData.value, position }, entityData.value.uuid);
+};
+</script>
+
+<template>
+  <div
+    :class="[
+      'entityContainer relative flex',
+      {
+        'justify-start': entityData.position === 'left',
+        'justify-center': entityData.position === 'center',
+        'justify-end': entityData.position === 'right'
+      }
+    ]"
+  >
+    <div class="flex flex-col">
+      <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"
+        :style="`width: ${entityData.width}px`"
+      />
+      <div
+        ref="imageContainer"
+        :class="[
+          'inline-block overflow-hidden leading-none max-h-[700px] min-h-[100px] min-w-[100px]',
+          {
+            resize: isResizable,
+            'min-h-[148px]': entityData.title || entityData.title === ''
+          }
+        ]"
+        :style="`height: ${entityData.height}px; width: ${entityData.width}px`"
+      >
+        <img
+          :src="entityData.url"
+          :alt="`Image ${entityData?.title}` || 'Image'"
+          class="max-h-[700px] min-h-[100px] object-contain"
+        />
+      </div>
+      <div class="speedDial absolute top-16 left-2 transition-all select-none">
+        <EditImageEntityMenu
+          :entityData="entityData"
+          :isResizable="isResizable"
+          @deleteEntity="deleteEntity"
+          @editPosition="editPosition"
+          @addTitle="addTitle"
+          @removeTitle="removeTitle"
+          @toggleIsResizable="toggleIsResizable"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.entityContainer .speedDial {
+  opacity: 0;
+}
+.entityContainer:hover .speedDial {
+  opacity: 100;
+}
+input::placeholder {
+  font-weight: 400;
+}
+</style>
diff --git a/src/helpers/index.ts b/src/helpers/index.ts
index b53eb64..a36d3f0 100644
--- a/src/helpers/index.ts
+++ b/src/helpers/index.ts
@@ -34,3 +34,28 @@ export const editEntity = (newState: IEntity, entityUuid: string) => {
   });
   dataStore.editHomeEntities(prevState);
 };
+
+export const deleteEntity = (entityUuid: string) => {
+  const dataStore = useDataStore();
+  let prevState = dataStore.homeEntities;
+  prevState = prevState.filter((entity: IEntity) => entity.uuid !== entityUuid);
+  dataStore.editHomeEntities(prevState);
+};
+
+export const changeOrderHomeEntity = (entityUuid: string, direction: 'up' | 'down') => {
+  const dataStore = useDataStore();
+  const prevState = dataStore.homeEntities;
+  const entityIndex = prevState.findIndex((entity: IEntity) => entity.uuid === entityUuid);
+  if (direction === 'up') {
+    [prevState[entityIndex], prevState[entityIndex - 1]] = [
+      prevState[entityIndex - 1],
+      prevState[entityIndex]
+    ];
+  } else {
+    [prevState[entityIndex], prevState[entityIndex + 1]] = [
+      prevState[entityIndex + 1],
+      prevState[entityIndex]
+    ];
+  }
+  dataStore.editHomeEntities(prevState);
+};
diff --git a/src/interfaces/entities.ts b/src/interfaces/entities.ts
index 5728cb7..fffff4d 100644
--- a/src/interfaces/entities.ts
+++ b/src/interfaces/entities.ts
@@ -31,8 +31,9 @@ export interface IText {
 export interface IImage {
   type: 'image';
   uuid: string;
-  name: string;
+  title: string;
   url: string;
   width: number;
   height: number;
+  position: 'left' | 'center' | 'right';
 }
diff --git a/src/modules/EntityItem.vue b/src/modules/EntityItem.vue
index f485f61..01fb2f8 100644
--- a/src/modules/EntityItem.vue
+++ b/src/modules/EntityItem.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { IEntity } from '@/interfaces/environment';
 import TextItem from '@/components/entities/TextItem.vue';
+import ImageItem from '@/components/entities/ImageItem.vue';
 
 interface Props {
   entity: IEntity;
@@ -11,6 +12,7 @@ defineProps<Props>();
 <template>
   <div>
     <TextItem v-if="entity.type === 'text'" :entityData="entity" />
+    <ImageItem v-if="entity.type === 'image'" :entityData="entity" />
   </div>
 </template>
 
diff --git a/src/output.css b/src/output.css
index f150fa5..122ecf8 100644
--- a/src/output.css
+++ b/src/output.css
@@ -620,18 +620,14 @@ video {
   left: 0px;
 }
 
-.left-4 {
-  left: 1rem;
+.left-2 {
+  left: 0.5rem;
 }
 
 .right-2 {
   right: 0.5rem;
 }
 
-.right-4 {
-  right: 1rem;
-}
-
 .top-0 {
   top: 0px;
 }
@@ -644,6 +640,10 @@ video {
   top: 0.5rem;
 }
 
+.z-50 {
+  z-index: 50;
+}
+
 .-m-2 {
   margin: -0.5rem;
 }
@@ -669,10 +669,18 @@ video {
   margin-right: -135px;
 }
 
+.mb-12 {
+  margin-bottom: 3rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
 
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
 .mb-6 {
   margin-bottom: 1.5rem;
 }
@@ -701,6 +709,10 @@ video {
   display: block;
 }
 
+.inline-block {
+  display: inline-block;
+}
+
 .flex {
   display: flex;
 }
@@ -713,6 +725,11 @@ video {
   display: table;
 }
 
+.size-10 {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
 .size-12 {
   width: 3rem;
   height: 3rem;
@@ -722,6 +739,18 @@ video {
   height: 100%;
 }
 
+.max-h-\[700px\] {
+  max-height: 700px;
+}
+
+.min-h-\[100px\] {
+  min-height: 100px;
+}
+
+.min-h-\[148px\] {
+  min-height: 148px;
+}
+
 .w-2 {
   width: 0.5rem;
 }
@@ -730,15 +759,37 @@ video {
   width: 5rem;
 }
 
+.w-4 {
+  width: 1rem;
+}
+
 .w-full {
   width: 100%;
 }
 
+.w-16 {
+  width: 4rem;
+}
+
+.min-w-\[100px\] {
+  min-width: 100px;
+}
+
 .-translate-y-full {
   --tw-translate-y: -100%;
   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-16 {
+  --tw-translate-y: -4rem;
+  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-12 {
+  --tw-translate-y: -3rem;
+  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-pointer {
   cursor: pointer;
 }
@@ -753,6 +804,10 @@ video {
   resize: none;
 }
 
+.resize {
+  resize: both;
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -765,6 +820,14 @@ video {
   align-items: center;
 }
 
+.justify-start {
+  justify-content: flex-start;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
 .justify-center {
   justify-content: center;
 }
@@ -777,10 +840,18 @@ video {
   gap: 0.5rem;
 }
 
+.overflow-hidden {
+  overflow: hidden;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
 
+.rounded-full {
+  border-radius: 9999px;
+}
+
 .rounded-md {
   border-radius: 0.375rem;
 }
@@ -840,6 +911,15 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-opacity-70 {
+  --tw-bg-opacity: 0.7;
+}
+
+.object-contain {
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
 .p-2 {
   padding: 0.5rem;
 }
@@ -848,9 +928,8 @@ video {
   padding: 1rem;
 }
 
-.px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+.p-6 {
+  padding: 1.5rem;
 }
 
 .px-4 {
@@ -858,11 +937,6 @@ video {
   padding-right: 1rem;
 }
 
-.py-0\.5 {
-  padding-top: 0.125rem;
-  padding-bottom: 0.125rem;
-}
-
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -893,8 +967,8 @@ video {
   padding-right: 135px;
 }
 
-.pt-6 {
-  padding-top: 1.5rem;
+.pt-8 {
+  padding-top: 2rem;
 }
 
 .text-center {
@@ -928,11 +1002,20 @@ video {
   font-weight: 600;
 }
 
+.leading-none {
+  line-height: 1;
+}
+
 .text-gray-400 {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
+.text-red-400 {
+  --tw-text-opacity: 1;
+  color: rgb(248 113 113 / var(--tw-text-opacity));
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -942,10 +1025,6 @@ video {
   opacity: 0;
 }
 
-.filter {
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
 .transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
diff --git a/src/pages/HomePage.vue b/src/pages/HomePage.vue
index e8c3cf2..f372c6d 100644
--- a/src/pages/HomePage.vue
+++ b/src/pages/HomePage.vue
@@ -59,19 +59,12 @@ const addEntity = (newEntity: IEntity) => {
         </button>
       </SplitterPanel>
       <SplitterPanel class="flex items-start justify-center"
-        ><div ref="entitiesContainer" class="pt-6 px-4">
-          <p class="mb-6">
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad autem cum dolores doloribus
-            dolorum, earum illum nam nemo nesciunt odit pariatur quam quisquam reprehenderit
-            sapiente ullam unde ut vel, voluptatem! Lorem ipsum dolor sit amet, consectetur
-            adipisicing elit. Ad autem cum dolores doloribus dolorum, earum illum nam nemo nesciunt
-            odit pariatur quam quisquam reprehenderit sapiente ullam unde ut vel, voluptatem!
-          </p>
+        ><div ref="entitiesContainer" class="w-full pt-8 px-4">
           <EntityItem
             v-for="entitiesItem of entities"
             :entity="entitiesItem"
             :key="entitiesItem.uuid"
-            class="mb-6"
+            class="mb-12"
           />
           <div class="relative">
             <CreateEntityMenu @addEntity="addEntity" />
diff --git a/yarn.lock b/yarn.lock
index f161634..78c6dd1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -693,6 +693,15 @@
   resolved "https://registry.yarnpkg.com/@vue/tsconfig/-/tsconfig-0.5.1.tgz#3124ec16cc0c7e04165b88dc091e6b97782fffa9"
   integrity sha512-VcZK7MvpjuTPx2w6blwnwZAu5/LgBUtejFOi3pPGQFXQN5Ela03FUtd2Qtg4yWGGissVL0dr6Ro1LfOFh+PCuQ==
 
+"@vueuse/components@^10.11.1":
+  version "10.11.1"
+  resolved "https://registry.yarnpkg.com/@vueuse/components/-/components-10.11.1.tgz#f6ff60769221d94da8c300417765fb0fecf0602a"
+  integrity sha512-ThcreQCX/eq61sLkLKjigD4PQvs3Wy4zglICvQH9tP6xl87y5KsQEoizn6OI+R3hrOgwQHLJe7Y0wLLh3fBKcg==
+  dependencies:
+    "@vueuse/core" "10.11.1"
+    "@vueuse/shared" "10.11.1"
+    vue-demi ">=0.14.8"
+
 "@vueuse/core@10.11.0", "@vueuse/core@^10.11.0":
   version "10.11.0"
   resolved "https://registry.npmjs.org/@vueuse/core/-/core-10.11.0.tgz"
@@ -703,6 +712,16 @@
     "@vueuse/shared" "10.11.0"
     vue-demi ">=0.14.8"
 
+"@vueuse/core@10.11.1":
+  version "10.11.1"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-10.11.1.tgz#15d2c0b6448d2212235b23a7ba29c27173e0c2c6"
+  integrity sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==
+  dependencies:
+    "@types/web-bluetooth" "^0.0.20"
+    "@vueuse/metadata" "10.11.1"
+    "@vueuse/shared" "10.11.1"
+    vue-demi ">=0.14.8"
+
 "@vueuse/integrations@^10.11.0":
   version "10.11.0"
   resolved "https://registry.yarnpkg.com/@vueuse/integrations/-/integrations-10.11.0.tgz#ce2746587172af9ab8faa713f42e619609ed0de1"
@@ -717,6 +736,11 @@
   resolved "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.11.0.tgz"
   integrity sha512-kQX7l6l8dVWNqlqyN3ePW3KmjCQO3ZMgXuBMddIu83CmucrsBfXlH+JoviYyRBws/yLTQO8g3Pbw+bdIoVm4oQ==
 
+"@vueuse/metadata@10.11.1":
+  version "10.11.1"
+  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-10.11.1.tgz#209db7bb5915aa172a87510b6de2ca01cadbd2a7"
+  integrity sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==
+
 "@vueuse/shared@10.11.0":
   version "10.11.0"
   resolved "https://registry.npmjs.org/@vueuse/shared/-/shared-10.11.0.tgz"
@@ -724,6 +748,13 @@
   dependencies:
     vue-demi ">=0.14.8"
 
+"@vueuse/shared@10.11.1":
+  version "10.11.1"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-10.11.1.tgz#62b84e3118ae6e1f3ff38f4fbe71b0c5d0f10938"
+  integrity sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==
+  dependencies:
+    vue-demi ">=0.14.8"
+
 acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
-- 
GitLab


From b5d7a641dc4ef0dc8024c2248c422dd13560e444 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Sat, 10 Aug 2024 12:34:30 +0500
Subject: [PATCH 3/3] change EditTextEntityMenu

---
 src/components/EditTextEntityMenu.vue | 182 ++++++++++++++++++++++++++
 src/components/entities/TextItem.vue  |  59 +++------
 2 files changed, 202 insertions(+), 39 deletions(-)
 create mode 100644 src/components/EditTextEntityMenu.vue

diff --git a/src/components/EditTextEntityMenu.vue b/src/components/EditTextEntityMenu.vue
new file mode 100644
index 0000000..a02b908
--- /dev/null
+++ b/src/components/EditTextEntityMenu.vue
@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import { changeOrderHomeEntity, deleteEntity } from '@/helpers';
+import type { IText } from '@/interfaces/entities';
+import { useDataStore } from '@/stores/data';
+import type { IEntity } from '@/interfaces/environment';
+
+interface Props {
+  entityData: IText;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits([
+  'deleteEntity',
+  'addTitle',
+  'removeTitle'
+  // 'toLeftPosition',
+  // 'toCenterPosition',
+  // 'toRightPosition',
+  // 'toggleIsResizable'
+]);
+
+// const isResizable = computed(() => props.isResizable);
+// const position = computed(() => props.entityData.position);
+
+const speedDialState = computed(() => {
+  const state = [];
+  if (!props.entityData?.title && props.entityData?.title !== '') {
+    state.push({
+      label: 'Add title',
+      icon: 'pi pi-pencil',
+      command: () => emit('addTitle')
+    });
+  }
+  if (props.entityData?.title || props.entityData?.title === '') {
+    state.push({
+      label: 'Remove title',
+      icon: 'pi pi-trash',
+      command: () => emit('removeTitle')
+    });
+  }
+  // state.push({
+  //   label: !isResizable.value ? 'Resize' : 'Stop resize',
+  //   icon: 'pi pi-arrow-up-right-and-arrow-down-left-from-center',
+  //   command: () => emit('toggleIsResizable')
+  // });
+  // switch (position.value) {
+  //   case 'left':
+  //     state.push({
+  //       label: 'Move to center',
+  //       icon: 'pi pi-align-center',
+  //       command: () => emit('toCenterPosition')
+  //     });
+  //     state.push({
+  //       label: 'Move to right',
+  //       icon: 'pi pi-arrow-right',
+  //       command: () => emit('toRightPosition')
+  //     });
+  //     break;
+  //   case 'center':
+  //     state.push({
+  //       label: 'Move to left',
+  //       icon: 'pi pi-arrow-left',
+  //       command: () => emit('toLeftPosition')
+  //     });
+  //     state.push({
+  //       label: 'Move to right',
+  //       icon: 'pi pi-arrow-right',
+  //       command: () => emit('toRightPosition')
+  //     });
+  //     break;
+  //   case 'right':
+  //     state.push({
+  //       label: 'Move to left',
+  //       icon: 'pi pi-arrow-left',
+  //       command: () => emit('toLeftPosition')
+  //     });
+  //     state.push({
+  //       label: 'Move to center',
+  //       icon: 'pi pi-align-center',
+  //       command: () => emit('toCenterPosition')
+  //     });
+  // }
+  state.push({
+    label: 'Delete',
+    icon: 'pi pi-trash',
+    command: () => deleteEntity(props.entityData.uuid)
+  });
+  return state;
+});
+
+const speedDialMove = computed(() => {
+  const state = [];
+  const dataStore = useDataStore();
+  const entities = dataStore.homeEntities;
+  const entityIndex = entities.findIndex(
+    (entity: IEntity) => entity.uuid === props.entityData.uuid
+  );
+  if (entityIndex !== 0) {
+    state.push({
+      label: 'Move up',
+      icon: 'pi pi-arrow-up',
+      command: () => changeOrderHomeEntity(props.entityData.uuid, 'up')
+    });
+  }
+  if (entityIndex !== entities.length - 1) {
+    state.push({
+      label: 'Move down',
+      icon: 'pi pi-arrow-down',
+      command: () => changeOrderHomeEntity(props.entityData.uuid, 'down')
+    });
+  }
+  return state;
+});
+</script>
+
+<template>
+  <div class="relative">
+    <SpeedDial
+      :model="speedDialState"
+      direction="right"
+      pt:root:class="speedDialRoot w-16 -translate-y-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-pen-to-square"></i>
+        </button>
+      </template>
+      <template #item="{ item, toggleCallback }">
+        <div
+          :class="[
+            'flex flex-col bg-black bg-opacity-70 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>
+    <SpeedDial :model="speedDialMove" direction="right" pt:root:class="speedDialRoot w-16">
+      <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-70 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/entities/TextItem.vue b/src/components/entities/TextItem.vue
index a0d923a..45d8bd8 100644
--- a/src/components/entities/TextItem.vue
+++ b/src/components/entities/TextItem.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { IText } from '@/interfaces/entities';
-import type { IEntity } from '@/interfaces/environment';
 import { useDataStore } from '@/stores/data';
 import { useTextareaAutosize } from '@vueuse/core';
-import { editEntity } from '@/helpers';
+import { deleteEntity, editEntity } from '@/helpers';
+import EditTextEntityMenu from '@/components/EditTextEntityMenu.vue';
 
 interface Props {
   entityData: IText;
@@ -11,8 +11,6 @@ interface Props {
 const props = defineProps<Props>();
 const entityData = ref(props.entityData);
 
-const dataStore = useDataStore();
-
 const addTitle = () => {
   editEntity({ ...entityData.value, title: 'Title' }, entityData.value.uuid);
   entityData.value = { ...entityData.value, title: 'Title' };
@@ -26,13 +24,7 @@ const editText = () => {
   editEntity({ ...entityData.value, text: entityData.value.text }, entityData.value.uuid);
 };
 
-const deleteEntity = () => {
-  let prevState = dataStore.homeEntities;
-  prevState = prevState.filter((entity: IEntity) => entity.uuid !== entityData.value.uuid);
-  dataStore.editHomeEntities(prevState);
-};
-
-const deleteTitle = () => {
+const removeTitle = () => {
   const newState = { ...entityData.value };
   delete newState.title;
   editEntity({ ...newState }, entityData.value.uuid);
@@ -43,15 +35,15 @@ const { textarea, triggerResize } = useTextareaAutosize();
 </script>
 
 <template>
-  <div class="textContainer relative">
+  <div class="entityContainer relative">
     <input
       ref="input"
-      v-if="entityData.title"
+      v-if="entityData.title || entityData.title === ''"
       type="text"
       v-model="entityData.title"
       @change="editTitle"
-      @input="triggerResize"
-      class="w-full mb-2 font-bold pl-2"
+      placeholder="Enter title..."
+      class="w-full mb-2 font-bold text-2xl pl-2"
     />
     <textarea
       ref="textarea"
@@ -61,26 +53,14 @@ const { textarea, triggerResize } = useTextareaAutosize();
       @input="triggerResize"
       placeholder="Enter text..."
     />
-    <button
-      v-if="!entityData?.title"
-      @click.prevent="addTitle"
-      class="addTitleButton absolute top-0 left-4 bg-blue-500 py-0.5 px-2 rounded-md -translate-y-full border-2 border-solid border-black transition-all select-none"
-    >
-      Add title
-    </button>
-    <button
-      @click.prevent="deleteEntity"
-      class="deleteEntityButton absolute top-0 right-4 bg-blue-500 py-0.5 px-2 rounded-md -translate-y-full border-2 border-solid border-black transition-all select-none"
-    >
-      <i class="pi pi-trash pr-2"></i>Delete
-    </button>
-    <button
-      v-if="entityData?.title"
-      @click.prevent="deleteTitle"
-      class="deleteEntityButton absolute top-0 left-4 bg-blue-500 py-0.5 px-2 rounded-md -translate-y-full border-2 border-solid border-black transition-all select-none"
-    >
-      <i class="pi pi-trash pr-2"></i>Delete title
-    </button>
+    <div class="speedDial absolute top-0 left-2 z-50 transition-all select-none">
+      <EditTextEntityMenu
+        :entityData="entityData"
+        @deleteEntity="deleteEntity"
+        @addTitle="addTitle"
+        @removeTitle="removeTitle"
+      />
+    </div>
   </div>
 </template>
 
@@ -93,12 +73,13 @@ textarea {
 textarea::-webkit-scrollbar {
   display: none;
 }
-.textContainer > .addTitleButton,
-.textContainer > .deleteEntityButton {
+.entityContainer > .speedDial {
   opacity: 0;
 }
-.textContainer:hover > .addTitleButton,
-.textContainer:hover > .deleteEntityButton {
+.entityContainer:hover > .speedDial {
   opacity: 100;
 }
+input::placeholder {
+  font-weight: 400;
+}
 </style>
-- 
GitLab