fix problem with image url size and save it on backend (c86a95d0) · Commits · Дмитрий Малюгин / NoteDiary

src/app/components.d.ts

+12 −6

Original line number	Diff line number	Diff line
		@@ -10,6 +10,7 @@ declare module 'vue' {
		App: typeof import('./App.vue')['default']
		Avatar: typeof import('primevue/avatar')['default']
		BaseDivider: typeof import('./../shared/BaseDivider.vue')['default']
		BaseLoader: typeof import('./../shared/BaseLoader.vue')['default']
		BaseSidebarMenu: typeof import('./../modules/BaseSidebarMenu.vue')['default']
		Button: typeof import('primevue/button')['default']
		CreateEntityMenu: typeof import('./../components/CreateEntityMenu.vue')['default']
		@@ -17,23 +18,28 @@ declare module 'vue' {
		Dialog: typeof import('primevue/dialog')['default']
		Divider: typeof import('primevue/divider')['default']
		Drawer: typeof import('primevue/drawer')['default']
		EntitiesList: typeof import('./../modules/EntitiesList.vue')['default']
		EntityItem: typeof import('./../modules/EntityItem.vue')['default']
		EntityTitle: typeof import('./../components/entities/share/EntityTitle.vue')['default']
		HomePage: typeof import('./../pages/HomePage.vue')['default']
		ImageItem: typeof import('./../modules/entities/ImageItem.vue')['default']
		ImagePositionMenu: typeof import('./../components/editEntityMenu/ImagePositionMenu.vue')['default']
		ImageSizeMenu: typeof import('./../components/editEntityMenu/ImageSizeMenu.vue')['default']
		ImageStateMenu: typeof import('./../components/editEntityMenu/ImageStateMenu.vue')['default']
		ImageMenu: typeof import('./../modules/entities/menu/ImageMenu.vue')['default']
		ImagePositionMenu: typeof import('./../components/entities/image/ImagePositionMenu.vue')['default']
		ImageSizeMenu: typeof import('./../components/entities/image/ImageSizeMenu.vue')['default']
		ImageStateMenu: typeof import('./../components/entities/image/ImageStateMenu.vue')['default']
		LogoAndLabel: typeof import('./../components/LogoAndLabel.vue')['default']
		PageBackgroundMenu: typeof import('./../modules/PageBackgroundMenu.vue')['default']
		RouterLink: typeof import('vue-router')['RouterLink']
		RouterView: typeof import('vue-router')['RouterView']
		SheetPage: typeof import('./../pages/[uuid]/SheetPage.vue')['default']
		SpeedDial: typeof import('primevue/speeddial')['default']
		Splitter: typeof import('primevue/splitter')['default']
		SplitterPanel: typeof import('primevue/splitterpanel')['default']
		TextFontMenu: typeof import('./../components/editEntityMenu/TextFontMenu.vue')['default']
		TextFontMenu: typeof import('./../components/entities/share/TextFontMenu.vue')['default']
		TextItem: typeof import('./../modules/entities/TextItem.vue')['default']
		TextPositionMenu: typeof import('./../components/editEntityMenu/TextPositionMenu.vue')['default']
		TextStateMenu: typeof import('./../components/editEntityMenu/TextStateMenu.vue')['default']
		TextMenu: typeof import('./../modules/entities/menu/TextMenu.vue')['default']
		TextPositionMenu: typeof import('./../components/entities/text/TextPositionMenu.vue')['default']
		TextStateMenu: typeof import('./../components/entities/text/TextStateMenu.vue')['default']
		Tree: typeof import('primevue/tree')['default']
		UserInfoHeaderWithSettings: typeof import('./../components/UserInfoHeaderWithSettings.vue')['default']
		}

src/app/helpers/images.ts

0 → 100644

+52 −0

Original line number	Diff line number	Diff line
		import type { IEntity } from '@/app/interfaces/environment';
		import { useFilesWebsocketStore } from '@/app/stores/filesWebsocket';
		import type { IImage } from '@/app/interfaces/entities';
		import { useWebsocketStore } from '@/app/stores/websocket';

		export const addUrlsToImageEntities = (entities: IEntity[]) => {
		const filesWebsocketStore = useFilesWebsocketStore();
		const filesBuffer = filesWebsocketStore.filesBuffer;
		let index = 0;
		const entitiesToReturn = entities.map((entity: IEntity) => {
		if (!entity.image_width) return entity;
		if (entity.imageUrl) return entity;
		if (filesWebsocketStore.imageUrl) {
		// редактирование сущности изображения
		entity.imageUrl = filesWebsocketStore.imageUrl;
		filesWebsocketStore.cleanImageUrl();
		} else {
		filesBuffer[index] = new Blob([filesBuffer[index].data], { type: 'image/jpeg' });
		entity.imageUrl = URL.createObjectURL(filesBuffer[index]);
		index += 1;
		}
		return entity;
		});
		filesWebsocketStore.cleanFilesBuffer();
		return entitiesToReturn;
		};

		export const checkIsImage = (entity: IEntity) => {
		if (!entity.image_width) {
		return entity;
		}
		const entityToReturn = { ...entity };
		const filesWebsocketStore = useFilesWebsocketStore();
		filesWebsocketStore.saveImageUrl(entityToReturn.imageUrl!);
		delete entityToReturn.imageUrl;
		return entityToReturn;
		};

		export const cropImage = async (newUrl: string, entity: IImage) => {
		const filesWebsocketStore = useFilesWebsocketStore();
		filesWebsocketStore.saveImageUrl(newUrl);
		const websocketStore = useWebsocketStore();
		const response = await fetch(newUrl);
		const blob = await response.blob();
		const buffer = await blob.arrayBuffer();
		filesWebsocketStore.sendData(buffer);
		const data = {
		event: 'cropImage',
		body: { ...entity }
		};
		websocketStore.sendData(data);
		};

src/app/helpers/index.ts

+110 −39

Original line number	Diff line number	Diff line
		import { useInterfaceStore } from '@/app/stores/interface';
		import type { IEntity } from '@/app/interfaces/environment';
		import { useDataStore } from '@/app/stores/data';
		import { useWebsocketStore } from '@/app/stores/websocket';
		import type { IEntity } from '@/app/interfaces/environment';
		import { checkIsImage } from '@/app/helpers/images';
		import { useFilesWebsocketStore } from '@/app/stores/filesWebsocket';
		import type { IImage } from '@/app/interfaces/entities';

		export const setDefaultHomeBackground = () => {
		const interfaceStore = useInterfaceStore();
		interfaceStore.resetHomeBackground();
		};

		export async function uploadFile($event: Event) {
		const target = $event.target as HTMLInputElement;
		if (target && target.files && target.files[0]) {
		const file = target.files[0];
		const reader = new FileReader();
		reader.readAsDataURL(file);
		reader.addEventListener('load', () => {
		const url = reader.result;
		export const fetchForHomeEntities = () => {
		const dataStore = useDataStore();
		const interfaceStore = useInterfaceStore();
		interfaceStore.changeHomeBackgroundUrl(url);
		localStorage.setItem('homeBackgroundUrl', url);
		});
		const websocketStore = useWebsocketStore();
		const filesWebsocketStore = useFilesWebsocketStore();
		const filesBuffer = filesWebsocketStore.filesBuffer;
		if (filesBuffer.length) {
		filesBuffer[0] = new Blob([filesBuffer[0].data], { type: 'image/jpeg' });
		interfaceStore.setHomeBackgroundFromDB(URL.createObjectURL(filesBuffer[0]));
		}
		if (!dataStore.homeEntities.length) {
		const getHomeEntitiesData = {
		event: 'getHomeEntities'
		};
		websocketStore.sendData(getHomeEntitiesData);
		}
		filesWebsocketStore.removeFirstFilesBuffer();
		};

		export function setDefaultHomeBackground() {
		const interfaceStore = useInterfaceStore();
		interfaceStore.changeHomeBackgroundUrl(
		'https://wallpapers.com/images/featured/minimalist-7xpryajznty61ra3.jpg'
		);
		localStorage.removeItem('homeBackgroundUrl');
		export const createHomeEntity = (newEntity: IEntity) => {
		const websocketStore = useWebsocketStore();
		if (newEntity.image_buffer) {
		websocketStore.setFileData(newEntity);
		const filesWebsocketStore = useFilesWebsocketStore();
		return filesWebsocketStore.sendData(newEntity.image_buffer);
		}
		const data = {
		event: 'createHomeEntity',
		body: newEntity
		};
		websocketStore.sendData(data);
		};

		export const editEntity = (newState: IEntity, entityUuid: string) => {
		export const editEntity = (newState: IEntity) => {
		newState = checkIsImage(newState);
		const websocketStore = useWebsocketStore();
		const data = {
		event: 'editHomeEntity',
		@@ -60,20 +78,73 @@ export const changeOrderHomeEntity = (entityUuid: string, direction: 'up' \| 'dow
		websocketStore.sendData(data);
		};

		export function addUrlsToImageEntities(entities: IEntity[]) {
		const filesWebsocketStore = useFilesWebsocketStore();
		const filesBlob = filesWebsocketStore.filesBlob;
		let index = 0;
		console.log('filesBlob[0].data', filesBlob[0]);
		console.log('filesBlob[0].data', filesBlob[0]);
		console.log('filesBlob.length', filesBlob.length);
		return entities.map((entity: IEntity) => {
		if (!entity.image_width) return entity;
		filesBlob[index] = new Blob([filesBlob[index]], { type: 'image/jpeg' });
		entity.imageUrl = URL.createObjectURL(filesBlob[index]);
		console.log('entity.imageUrl', entity.imageUrl);
		index += 1;
		console.log('filesBlob.length', filesBlob.length);
		return entity;
		});
		export const getImageSpeedDialSizeSmallerLabelsToRemove = (entity: IImage) => {
		const elementsLabelsToRemove = [];
		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');
		if (
		initialImageWidth <= 200 \|\|
		initialImageHeight <= 200 \|\|
		(initialImageWidth >= 1600 && entity.text_position)
		) {
		elementsLabelsToRemove.push('x0.5');
		if (
		initialImageWidth <= 95 \|\|
		initialImageHeight <= 95 \|\|
		(initialImageWidth >= 1066 && entity.text_position)
		) {
		elementsLabelsToRemove.push('x0.75');
		}
		}
		}
		if (
		(initialImageWidth >= 800 && entity.text_position) \|\|
		entity.image_width < initialImageWidth
		) {
		elementsLabelsToRemove.push('x1');
		}
		return elementsLabelsToRemove;
		};

		export const getImageSpeedDialSizeBiggerLabelsToRemove = (entity: IImage) => {
		const elementsLabelsToRemove = [];
		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 >= 960 \|\|
		initialImageHeight >= 960 \|\|
		(initialImageWidth >= 640 && entity.text_position)
		) {
		elementsLabelsToRemove.push('x1.25');
		if (
		initialImageWidth >= 800 \|\|
		initialImageHeight >= 800 \|\|
		(initialImageWidth >= 533 && entity.text_position)
		) {
		elementsLabelsToRemove.push('x1.5');
		if (
		initialImageWidth >= 685 \|\|
		initialImageHeight >= 685 \|\|
		(initialImageWidth >= 457 && entity.text_position)
		) {
		elementsLabelsToRemove.push('x1.75');
		if (
		initialImageWidth >= 600 \|\|
		initialImageHeight >= 600 \|\|
		(initialImageWidth >= 400 && entity.text_position)
		) {
		elementsLabelsToRemove.push('x2');
		}
		}
		}
		}
		return elementsLabelsToRemove;
		};

src/app/interfaces/index.ts

+1 −1

Original line number	Diff line number	Diff line
		export interface IImageMainInfo {
		image_url: string;
		imageUrl: string;
		image_width: number;
		image_height: number;
		}

src/app/stores/filesWebsocket.ts

+30 −33

Original line number	Diff line number	Diff line
		import { defineStore } from 'pinia';
		import { useDataStore } from '@/app/stores/data';
		import type { IEntity } from '@/app/interfaces/environment';
		import { useInterfaceStore } from '@/app/stores/interface';
		import { useWebsocketStore } from '@/app/stores/websocket';

		export const useFilesWebsocketStore = defineStore('filesWebsocketStore', () => {
		const socket = ref();
		const dataStore = useDataStore();
		const interfaceStore = useInterfaceStore();
		const homeEntities = computed(() => dataStore.homeEntities);
		const filesBlob = ref([]);

		const socket = ref();
		const filesBuffer = ref([]);
		const imageUrl = ref();

		onMounted(() => {
		socket.value = new WebSocket('ws://localhost:5001');
		socket.value.binaryType = 'arraybuffer';
		socket.value.onmessage = (response: any) => {
		socket.value.onmessage = (response) => {
		console.log('response: ', response);
		switch (response?.event) {
		case 'changeHomeBackgroundUrl':
		interfaceStore.setHomeBackgroundUrlFromDB(response.data?.setting_value);
		break;
		case 'editImageHomeEntity': {
		let entities = [...dataStore.homeEntities];
		entities = entities.map((entity: IEntity) => {
		if (entity.entity_uuid !== response.data.entity_uuid) return entity;
		return response.data;
		});
		dataStore.editHomeEntities(entities);
		break;
		if (response?.data?.byteLength) {
		filesBuffer.value.push(response);
		}
		default: {
		console.log('default');
		filesBlob.value.push(response);
		}
		}
		};
		socket.value.onclose = () => {
		console.log('Websocket connection closed');
		};
		socket.value.onerror = () => {
		console.log('Websocket caught an error');
		interfaceStore.setIsFetchedForBackground();
		};
		});

		function sendData(data: any) {
		function removeFirstFilesBuffer() {
		filesBuffer.value.shift();
		}
		function cleanFilesBuffer() {
		filesBuffer.value = [];
		}
		function saveImageUrl(url: string) {
		imageUrl.value = url;
		}
		function cleanImageUrl() {
		imageUrl.value = '';
		}
		function sendData(data: unknown) {
		socket.value.send(data);
		}
		return { filesBlob, sendData };
		return {
		filesBuffer,
		imageUrl,
		cleanFilesBuffer,
		removeFirstFilesBuffer,
		saveImageUrl,
		cleanImageUrl,
		sendData
		};
		});