mynode/packages/app-mobile/contentScripts/imageEditorBundle/contentScript/applyTemplateToEditor.ts

import { AbstractComponent, Editor, BackgroundComponentBackgroundType, Erase, Vec2, Rect2 } from 'js-draw';

const applyTemplateToEditor = async (editor: Editor, templateData: string) => {
	let backgroundComponent: AbstractComponent|null = null;
	let imageSize = editor.getImportExportRect().size;
	let autoresize = true;

	try {
		const templateJSON = JSON.parse(templateData);

		const isEmptyTemplate =
			!('imageSize' in templateJSON) && !('backgroundData' in templateJSON);

		// If the template is empty, add a default background
		if (isEmptyTemplate) {
			templateJSON.backgroundData = {
				'name': 'image-background',
				'zIndex': 0,
				'data': {
					'mainColor': '#ffffff',
					'backgroundType': BackgroundComponentBackgroundType.SolidColor,
				},
			};
		}

		if ('backgroundData' in templateJSON) {
			backgroundComponent = AbstractComponent.deserialize(
				templateJSON['backgroundData'],
			);
		}

		if ('imageSize' in templateJSON) {
			imageSize = Vec2.ofXY(templateJSON.imageSize);
		}

		if ('autoresize' in templateJSON) {
			autoresize = !!templateJSON.autoresize;
		}
	} catch (e) {
		console.error('Warning: Invalid image template data: ', e);
	}

	if (backgroundComponent) {
		// Remove the old background (if any)
		const previousBackground = editor.image.getBackgroundComponents();
		if (previousBackground.length > 0) {
			const removeBackgroundCommand = new Erase(previousBackground);
			await editor.dispatchNoAnnounce(removeBackgroundCommand, false);
		}

		// Add the new background
		const addBackgroundCommand = editor.image.addElement(backgroundComponent);
		await editor.dispatchNoAnnounce(addBackgroundCommand, false);
	}

	// Set the image size
	const imageSizeCommand = editor.setImportExportRect(new Rect2(0, 0, imageSize.x, imageSize.y));
	await editor.dispatchNoAnnounce(imageSizeCommand, false);

	// Enable/disable autoresize
	await editor.dispatchNoAnnounce(editor.image.setAutoresizeEnabled(autoresize), false);

	// And zoom to the template (false = don't make undoable)
	await editor.dispatchNoAnnounce(editor.viewport.zoomTo(editor.getImportExportRect()), false);
};

export default applyTemplateToEditor;