image settings in process (aec23a1f) · Commits · Дмитрий Малюгин / NoteDiary

src/app/components.d.ts

+0 −6

Original line number	Diff line number	Diff line
		@@ -13,7 +13,6 @@ declare module 'vue' {
		App: typeof import('./App.vue')['default']
		AuthorizationForm: typeof import('./../modules/authorization/AuthorizationForm.vue')['default']
		BaseLoader: typeof import('./../shared/BaseLoader.vue')['default']
		BaseSidebarMenu: typeof import('./../modules/BaseSidebarMenu.vue')['default']
		Button: typeof import('./../shared/ui/Button.vue')['default']
		CloseCircle: typeof import('./../shared/icons/CloseCircle.vue')['default']
		CreateEntityMenu: typeof import('./../components/CreateEntityMenu.vue')['default']
		@@ -21,7 +20,6 @@ declare module 'vue' {
		DashedIcon: typeof import('./../shared/icons/DashedIcon.vue')['default']
		Divider: typeof import('./../shared/ui/Divider.vue')['default']
		DividerItem: typeof import('./../modules/entities/DividerItem.vue')['default']
		DividerMenu: typeof import('./../modules/entities/settings/DividerMenu.vue')['default']
		DividerSettings: typeof import('./../components/entities/settings/DividerSettings.vue')['default']
		DottedIcon: typeof import('./../shared/icons/DottedIcon.vue')['default']
		Drawer: typeof import('./../shared/ui/Drawer.vue')['default']
		@@ -35,7 +33,6 @@ declare module 'vue' {
		HorizontalLineIcon: typeof import('./../shared/icons/HorizontalLineIcon.vue')['default']
		ImageIcon: typeof import('./../shared/icons/ImageIcon.vue')['default']
		ImageItem: typeof import('./../modules/entities/ImageItem.vue')['default']
		ImageMenu: typeof import('./../components/entities/settings/ImageMenu.vue')['default']
		ImagePositionMenu: typeof import('./../components/entities/image/ImagePositionMenu.vue')['default']
		ImageSettings: typeof import('./../components/entities/settings/ImageSettings.vue')['default']
		ImageSettingsList: typeof import('./../components/entities/settings/lists/ImageSettingsList.vue')['default']
		@@ -43,7 +40,6 @@ declare module 'vue' {
		ImageStateMenu: typeof import('./../components/entities/image/ImageStateMenu.vue')['default']
		LogoAndLabel: typeof import('./../components/LogoAndLabel.vue')['default']
		MenuDial: typeof import('./../shared/ui/MenuDial.vue')['default']
		MenuHeader: typeof import('./../components/MenuHeader.vue')['default']
		Modal: typeof import('./../shared/ui/Modal.vue')['default']
		NavigationIcon: typeof import('./../shared/icons/NavigationIcon.vue')['default']
		PageBackgroundMenu: typeof import('./../modules/PageBackgroundMenu.vue')['default']
		@@ -68,9 +64,7 @@ declare module 'vue' {
		TableIcon: typeof import('./../shared/icons/TableIcon.vue')['default']
		TelegramSection: typeof import('./../modules/TelegramSection.vue')['default']
		TextFontMenu: typeof import('./../components/entities/share/TextFontMenu.vue')['default']
		TextItem: typeof import('./../modules/entities/TextItem.vue')['default']
		TextPositionMenu: typeof import('./../components/entities/text/TextPositionMenu.vue')['default']
		TextSettings: typeof import('./../components/entities/settings/TextSettings.vue')['default']
		TextStateMenu: typeof import('./../components/entities/text/TextStateMenu.vue')['default']
		ToggleButton: typeof import('./../shared/ui/ToggleButton.vue')['default']
		ToggleSwitch: typeof import('./../shared/ui/ToggleSwitch.vue')['default']

src/app/helpers/images.ts

+92 −21

Original line number	Diff line number	Diff line
		@@ -3,6 +3,7 @@ import { useFilesWebsocketStore } from '@/app/stores/filesWebsocket';
		import type { IImage } from '@/app/interfaces/entities';
		import { useWebsocketStore } from '@/app/stores/websocket';
		import { useInterfaceStore } from '@/app/stores/interface';
		import { editEntity } from '@/app/helpers/index';

		export const setDefaultPageBackground = () => {
		const interfaceStore = useInterfaceStore();
		@@ -57,24 +58,86 @@ export const cropImage = async (newUrl: string, entity: IImage) => {
		websocketStore.sendData(data);
		};

		export const getImageScalesToRemove = (entity: IImage) => {
		const valuesToRemove = [];
		let scale = entity.image_scale;
		if (scale[0] === 'x') scale = scale.slice(1);
		const initialImageWidth = Math.ceil(+entity.image_width / +scale);
		const initialImageHeight = Math.ceil(+entity.image_height / +scale);
		console.log(initialImageWidth, initialImageHeight);
		if (initialImageWidth <= 400 \|\| initialImageHeight <= 400) {
		valuesToRemove.push('x0.25');
		if (
		initialImageWidth <= 200 \|\|
		initialImageHeight <= 200 \|\|
		(initialImageWidth >= 1600 && (entity.text ?? null))
		) {
		valuesToRemove.push('x0.5');
		if (
		initialImageWidth <= 95 \|\|
		initialImageHeight <= 95 \|\|
		(initialImageWidth >= 1066 && (entity.text ?? null))
		) {
		valuesToRemove.push('x0.75');
		}
		}
		}
		if (
		(initialImageWidth >= 800 && (entity.text ?? null)) \|\|
		entity.image_width > initialImageWidth
		) {
		valuesToRemove.push('x1');
		}
		if (
		initialImageWidth >= 960 \|\|
		initialImageHeight >= 560 \|\|
		(initialImageWidth >= 640 && (entity.text ?? null))
		) {
		valuesToRemove.push('x1.25');
		if (
		initialImageWidth >= 800 \|\|
		initialImageHeight >= 467 \|\|
		(initialImageWidth >= 533 && (entity.text ?? null))
		) {
		valuesToRemove.push('x1.5');
		if (
		initialImageWidth >= 685 \|\|
		initialImageHeight >= 400 \|\|
		(initialImageWidth >= 457 && (entity.text ?? null))
		) {
		valuesToRemove.push('x1.75');
		if (
		initialImageWidth >= 600 \|\|
		initialImageHeight >= 350 \|\|
		(initialImageWidth >= 400 && (entity.text ?? null))
		) {
		valuesToRemove.push('x2');
		}
		}
		}
		}
		console.log('valuesToRemove: ', valuesToRemove);
		return valuesToRemove;
		};

		export const getImageSpeedDialSizeSmallerLabelsToRemove = (entity: IImage) => {
		const elementsLabelsToRemove = [];
		const valuesToRemove = [];
		const initialImageWidth = Math.ceil(entity.image_width / +entity.image_scale);
		const initialImageHeight = Math.ceil(entity.image_height / +entity.image_scale);
		if (initialImageWidth <= 400 \|\| initialImageHeight <= 400) {
		elementsLabelsToRemove.push('x0.25');
		valuesToRemove.push('x0.25');
		if (
		initialImageWidth <= 200 \|\|
		initialImageHeight <= 200 \|\|
		(initialImageWidth >= 1600 && entity.text_position)
		) {
		elementsLabelsToRemove.push('x0.5');
		valuesToRemove.push('x0.5');
		if (
		initialImageWidth <= 95 \|\|
		initialImageHeight <= 95 \|\|
		(initialImageWidth >= 1066 && entity.text_position)
		) {
		elementsLabelsToRemove.push('x0.75');
		valuesToRemove.push('x0.75');
		}
		}
		}
		@@ -82,48 +145,56 @@ export const getImageSpeedDialSizeSmallerLabelsToRemove = (entity: IImage) => {
		(initialImageWidth >= 800 && entity.text_position) \|\|
		entity.image_width < initialImageWidth
		) {
		elementsLabelsToRemove.push('x1');
		valuesToRemove.push('x1');
		}
		return elementsLabelsToRemove;
		return valuesToRemove;
		};

		export const getImageSpeedDialSizeBiggerLabelsToRemove = (entity: IImage) => {
		const elementsLabelsToRemove = [];
		const valuesToRemove = [];
		const initialImageWidth = Math.ceil(entity.image_width / +entity.image_scale);
		const initialImageHeight = Math.ceil(entity.image_height / +entity.image_scale);
		if (
		(initialImageWidth >= 800 && entity.text_position) \|\|
		entity.image_width > initialImageWidth
		) {
		elementsLabelsToRemove.push('x1');
		if ((initialImageWidth >= 800 && entity.text) \|\| entity.image_width > initialImageWidth) {
		valuesToRemove.push('x1');
		}
		if (
		initialImageWidth >= 960 \|\|
		initialImageHeight >= 560 \|\|
		(initialImageWidth >= 640 && entity.text_position)
		(initialImageWidth >= 640 && entity.text)
		) {
		elementsLabelsToRemove.push('x1.25');
		valuesToRemove.push('x1.25');
		if (
		initialImageWidth >= 800 \|\|
		initialImageHeight >= 467 \|\|
		(initialImageWidth >= 533 && entity.text_position)
		(initialImageWidth >= 533 && entity.text)
		) {
		elementsLabelsToRemove.push('x1.5');
		valuesToRemove.push('x1.5');
		if (
		initialImageWidth >= 685 \|\|
		initialImageHeight >= 400 \|\|
		(initialImageWidth >= 457 && entity.text_position)
		(initialImageWidth >= 457 && entity.text)
		) {
		elementsLabelsToRemove.push('x1.75');
		valuesToRemove.push('x1.75');
		if (
		initialImageWidth >= 600 \|\|
		initialImageHeight >= 350 \|\|
		(initialImageWidth >= 400 && entity.text_position)
		(initialImageWidth >= 400 && entity.text)
		) {
		elementsLabelsToRemove.push('x2');
		valuesToRemove.push('x2');
		}
		}
		}
		}
		return elementsLabelsToRemove;
		return valuesToRemove;
		};

		export const scaleImage = (entityData: IImage, prevScale: string) => {
		let scale = entityData.image_scale;
		if (scale[0] === 'x') scale = scale.slice(1);
		if (prevScale[0] === 'x') prevScale = prevScale.slice(1);
		const initialWidth = Math.ceil(+entityData.image_width / +prevScale);
		entityData.image_width = Math.ceil(initialWidth * +scale);
		const initialHeight = Math.ceil(+entityData.image_height / +prevScale);
		entityData.image_height = Math.ceil(initialHeight * +scale);
		return entityData;
		};

src/app/interfaces/ui.ts

+2 −1

Original line number	Diff line number	Diff line
		import type { TTheme } from '@/app/interfaces/environment';

		export interface IToggleButtonItem {
		export interface IToggleButtonOption {
		label: string;
		value?: string \| number \| boolean;
		textColor?: TTheme;
		backgroundColor?: TTheme;
		isLabelHidden?: boolean;

src/app/stores/filesWebsocket.ts

+0 −2

Original line number	Diff line number	Diff line
		@@ -12,7 +12,6 @@ export const useFilesWebsocketStore = defineStore('filesWebsocketStore', () => {
		socket.value = new WebSocket('ws://localhost:5001');
		socket.value.binaryType = 'arraybuffer';
		socket.value.onmessage = (response) => {
		console.log('response: ', response);
		if (response?.data?.byteLength) {
		filesBuffer.value.push(response);
		}
		@@ -33,7 +32,6 @@ export const useFilesWebsocketStore = defineStore('filesWebsocketStore', () => {
		imageUrl.value = '';
		}
		function sendData(data: unknown) {
		console.log('data: ', data);
		socket.value.send(data);
		}
		return {

src/app/stores/websocket.ts

+1 −3

Original line number	Diff line number	Diff line
		@@ -29,7 +29,7 @@ export const useWebsocketStore = defineStore('websocketStore', () => {
		socket.value = new WebSocket('ws://localhost:5000');
		socket.value.onopen = async () => {
		const userUuid = cookies.get('user_uuid');
		console.log('userUuid', userUuid);
		// console.log('userUuid', userUuid);
		if (userUuid) {
		const getUserData = {
		event: 'getUser',
		@@ -111,13 +111,11 @@ export const useWebsocketStore = defineStore('websocketStore', () => {
		authorizationStore.setUserNickName(response.data.nick_name);
		authorizationStore.setUserData(response.data);
		dataStore.setPagesData(response.data.pages_uuid);
		console.log('getUser response.data: ', response.data);
		break;
		}
		case 'getPage': {
		dataStore.setCurrentPageUuid(response.data.page_uuid);
		dataStore.setCurrentPageData(response.data);
		console.log('getPage response.data: ', response.data);
		break;
		}
		case 'getPageEntities': {