refactor of entity of text and some more additions (0b89eb11) · Commits · Дмитрий Малюгин / NoteDiary

components.d.ts

+4 −0

Original line number	Diff line number	Diff line
		@@ -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']

src/app/interfaces/entities.ts

+13 −6

Original line number	Diff line number	Diff line
		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';
		}

src/app/interfaces/environment.ts

+20 −3

Original line number	Diff line number	Diff line
		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'

src/components/CreateEntityMenu.vue

+6 −2

Original line number	Diff line number	Diff line
		@@ -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'
		});
		}
		},

src/components/editEntityMenu/ImageMoveMenu.vue→src/components/editEntityMenu/ImagePositionMenu.vue

+65 −5

Original line number	Diff line number	Diff line
		@@ -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"