0.0.8.

README.md

@@ -2,7 +2,7 @@
 
 # Mini Canvas Editor
 
-[![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fimg-js%2Fmini-canvas-editor%2Fbadge%3Fref%3Dmain&style=flat-square)](https://actions-badge.atrox.dev/img-js/mini-canvas-editor/goto?ref=main) [![View this project on NPM](https://img.shields.io/npm/v/mini-canvas-editor.svg?style=flat-square)](https://npmjs.org/package/mini-canvas-editor)
+[![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fb4rtaz%2Fmini-canvas-editor%2Fbadge%3Fref%3Dmain&style=flat-square)](https://actions-badge.atrox.dev/b4rtaz/mini-canvas-editor/goto?ref=main) [![View this project on NPM](https://img.shields.io/npm/v/mini-canvas-editor.svg?style=flat-square)](https://npmjs.org/package/mini-canvas-editor)
 
 Canvas editor component for JavaScript application. Works with any front-end framework. Easy to integrate and use. Well-known graphical interface. Edit images, draw shapes, add texts and more. Gzipped size less than 100 KB. Uses Fabric.js internally.
 
@@ -15,9 +15,9 @@ Main use cases:
 
 Online Examples:
 
-* [🎬 Template Creator](https://img-js.github.io/mini-canvas-editor/webpack-app/public/template-creator.html)
-* [🎨 Inpainting Mask](https://img-js.github.io/mini-canvas-editor/webpack-app/public/inpainting-mask.html)
-* [📦 Vanilla JavaScript](https://img-js.github.io/mini-canvas-editor/webpack-app/public/vanilla-javascript.html)
+* [🎬 Template Creator](https://b4rtaz.github.io/mini-canvas-editor/webpack-app/public/template-creator.html)
+* [🎨 Inpainting Mask](https://b4rtaz.github.io/mini-canvas-editor/webpack-app/public/inpainting-mask.html)
+* [📦 Vanilla JavaScript](https://b4rtaz.github.io/mini-canvas-editor/webpack-app/public/vanilla-javascript.html)
 
 ## 🚀 Installation
 

demos/svelte-app/package.json

@@ -14,8 +14,8 @@
 		"prettier:fix": "prettier --write ./src"
 	},
 	"dependencies": {
-		"mini-canvas-editor": "^0.0.7",
-		"mini-canvas-core": "^0.0.7",
+		"mini-canvas-editor": "^0.0.8",
+		"mini-canvas-core": "^0.0.8",
 		"fabric": "6.0.0-beta13",
 		"canvas": "^2.11.2"
 	},
@@ -30,4 +30,4 @@
 		"prettier": "^3.0.3"
 	},
 	"type": "module"
-}
+}

demos/webpack-app/package.json

@@ -14,8 +14,8 @@
 		"prettier:fix": "prettier --write ./src"
 	},
 	"dependencies": {
-		"mini-canvas-editor": "^0.0.7",
-		"mini-canvas-core": "^0.0.7"
+		"mini-canvas-editor": "^0.0.8",
+		"mini-canvas-core": "^0.0.8"
 	},
 	"devDependencies": {
 		"ts-loader": "^9.4.2",

demos/webpack-app/public/inpainting-mask.html

@@ -41,7 +41,7 @@
 		</div>
 
 		<p>
-			<a href="https://github.com/b4rtaz/mini-canvas-editor">Mini Canvas Editor</a>
+			<a href="https://github.com/img-js/mini-canvas-editor">Mini Canvas Editor</a>
 		</p>
 	</body>
 </html>

demos/webpack-app/public/template-creator.html

@@ -43,12 +43,14 @@
 
 		<p>Rects named $cat are replaced with a cat image, $name variables in texboxes are replaced by some name.</p>
 
+		<p><button id="resetTemplateButton">Reset template</button></p>
+
 		<div class="debug">
 			<img id="preview" />
 		</div>
 
 		<p>
-			<a href="https://github.com/b4rtaz/mini-canvas-editor">Mini Canvas Editor</a>
+			<a href="https://github.com/img-js/mini-canvas-editor">Mini Canvas Editor</a>
 		</p>
 	</body>
 </html>

demos/webpack-app/public/vanilla-javascript.html

@@ -31,11 +31,11 @@
 			<button id="saveButton">Save bitmap</button>
 		</p>
 		<p>
-			<a href="https://github.com/b4rtaz/mini-canvas-editor">Mini Canvas Editor</a>
+			<a href="https://github.com/img-js/mini-canvas-editor">Mini Canvas Editor</a>
 		</p>
 
-		<link href="https://cdn.jsdelivr.net/npm/mini-canvas-editor@0.0.7/css/editor.css" rel="stylesheet">
-		<script src="https://cdn.jsdelivr.net/npm/mini-canvas-editor@0.0.7/dist/index.umd.js"></script>
+		<link href="https://cdn.jsdelivr.net/npm/mini-canvas-editor@0.0.8/css/editor.css" rel="stylesheet">
+		<script src="https://cdn.jsdelivr.net/npm/mini-canvas-editor@0.0.8/dist/index.umd.js"></script>
 		<script>
 			const placeholder = document.getElementById('placeholder');
 			const saveButton = document.getElementById('saveButton');

demos/webpack-app/src/template-creator.ts

@@ -1,17 +1,17 @@
 import { Editor } from 'mini-canvas-editor';
-import { MceRect, MceTextbox } from 'mini-canvas-core';
+import { MceImageJSON, MceRect, MceTextbox } from 'mini-canvas-core';
 
 import 'mini-canvas-editor/css/editor.css';
 
 export class App {
-	public static async create(): Promise<App> {
+	public static async create(reset: boolean): Promise<App> {
 		const placeholder = document.getElementById('placeholder') as HTMLElement;
 		const preview = document.getElementById('preview') as HTMLImageElement;
 
-		const saved = localStorage['mceTemplateCreator'];
+		const saved = Storage.tryGet();
 		let editor: Editor;
-		if (saved) {
-			editor = await Editor.createFromJSON(JSON.parse(saved), placeholder, {});
+		if (saved && !reset) {
+			editor = await Editor.createFromJSON(saved, placeholder, {});
 		} else {
 			editor = Editor.createBlank(placeholder, 400, 300, {});
 			editor.add(
@@ -40,7 +40,8 @@ export class App {
 					fontSize: 40,
 					left: 140,
 					top: 52,
-					width: 240
+					width: 240,
+					maxHeight: 60
 				})
 			);
 			editor.add(
@@ -49,7 +50,8 @@ export class App {
 					left: 140,
 					top: 120,
 					width: 240,
-					fill: '#8c8c8c'
+					fill: '#8c8c8c',
+					maxHeight: 30
 				})
 			);
 		}
@@ -59,7 +61,7 @@ export class App {
 			preview.src = png;
 
 			const json = editor.toJSON();
-			localStorage['mceTemplateCreator'] = JSON.stringify(json);
+			Storage.set(json);
 		});
 		const app = new App(editor, preview);
 		editor.onChanged.subscribe(app.reloadPreview);
@@ -86,7 +88,7 @@ export class App {
 		layers.forEach(layer => {
 			if (layer.type === 'textbox') {
 				const text = replacer.getText(layer);
-				const newText = text.replace('$name', 'Tosiek').replace('$time', new Date().toLocaleTimeString());
+				const newText = text.replace('$name', 'Tosiek').replace('$time', new Date().toLocaleString());
 				if (newText !== text) {
 					replacer.replaceText(layer, newText);
 				}
@@ -98,6 +100,43 @@ export class App {
 
 		this.preview.src = canvas.exportToDataURL('png');
 	};
+
+	public async destroy() {
+		await this.editor.destroy();
+	}
+}
+
+const localStorageKey = 'mceTemplateCreator_v2';
+
+export class Storage {
+	public static tryGet(): MceImageJSON | undefined {
+		const raw = localStorage[localStorageKey];
+		return raw ? JSON.parse(raw) : undefined;
+	}
+
+	public static set(json: MceImageJSON) {
+		localStorage[localStorageKey] = JSON.stringify(json);
+	}
+
+	public static clear() {
+		localStorage.removeItem(localStorageKey);
+	}
+}
+
+async function load() {
+	const resetTemplateButton = document.getElementById('resetTemplateButton');
+	let app = await App.create(false);
+
+	resetTemplateButton?.addEventListener(
+		'click',
+		async e => {
+			e.preventDefault();
+			await app.destroy();
+			Storage.clear();
+			app = await App.create(true);
+		},
+		false
+	);
 }
 
-document.addEventListener('DOMContentLoaded', App.create, false);
+document.addEventListener('DOMContentLoaded', load, false);