Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<script setup lang="ts">
import { useVModel } from '@vueuse/core';
import { useDataStore } from '@/app/stores/data';
import type { IImage } from '@/app/interfaces/entities';
import { deleteEntity, editEntity } from '@/app/helpers';
interface Props {
entityData: IImage;
}
const props = defineProps<Props>();
const emit = defineEmits(['update:entityData', 'openCropImageModal']);
const entityData = useVModel(props, 'entityData', emit);
const dataStore = useDataStore();
const homeEntities = computed(() => dataStore.homeEntities);
const addTitle = () => {
editEntity({
...entityData.value,
title: 'Title',
entity_title_position: 'center',
font_size: entityData.value.font_size ?? '24'
});
entityData.value = { ...entityData.value, title: 'Title', entity_title_position: 'center' };
};
const removeTitle = () => {
const newState = { ...entityData.value };
newState.title = null;
editEntity({ ...newState });
entityData.value = newState;
};
const addText = () => {
editEntity({
...entityData.value,
text: 'Text',
text_position: 'right',
font_size: entityData.value.font_size ?? '24',
paragraph_size: 'full'
});
entityData.value = { ...entityData.value, text: 'Text' };
};
const removeText = () => {
const newState = { ...entityData.value };
['text', 'text_position', 'font_size', 'paragraph_size'].forEach((item) => {
newState[item] = null;
});
editEntity({ ...newState });
entityData.value = newState;
};
const editPosition = (position: 'left' | 'center' | 'right') => {
entityData.value.entity_position = position;
editEntity({ ...entityData.value, entity_position: position });
};
const editTitlePosition = (position: 'left' | 'center' | 'right') => {
entityData.value.entity_title_position = position;
editEntity({ ...entityData.value, entity_title_position: position });
};
const editTextPosition = (position: 'left' | 'right') => {
entityData.value.text_position = position;
editEntity({ ...entityData.value, text_position: position });
};
const editParagraphWidth = (widthMode: 'full' | 'half') => {
entityData.value.paragraph_size = widthMode;
editEntity({ ...entityData.value, paragraph_size: widthMode });
};
const changeFontSize = (newSize: '16' | '20' | '24' | '40' | '64') => {
entityData.value.font_size = newSize;
editEntity({ ...entityData.value, font_size: newSize });
};
</script>
<template>
<div class="speedDial absolute left-2 top-0 transition-all select-none">
<ImageStateMenu
:entityData="entityData"
@deleteEntity="deleteEntity"
@addTitle="addTitle"
@removeTitle="removeTitle"
@addText="addText"
@removeText="removeText"
@openCropImageModal="$emit('openCropImageModal')"
/>
</div>
<div
v-if="entityData?.text || entityData?.title"
class="speedDial h-12 absolute left-2 top-0 translate-y-full transition-all select-none"
>
<TextFontMenu :entityData="entityData" @changeFontSize="changeFontSize" />
</div>
<div
v-if="homeEntities.length > 1"
class="speedDial absolute left-2 top-0 translate-y-24 transition-all select-none"
>
<ImagePositionMenu
:entityData="entityData"
@editPosition="editPosition"
@editTitlePosition="editTitlePosition"
@editTextPosition="editTextPosition"
@editParagraphWidth="editParagraphWidth"
/>
</div>
</template>
<style scoped></style>