0.0.3.

img-js · Oct 15, 2023 · b45fed5 · b45fed5
1 parent b6d192e
commit b45fed5
Show file tree

Hide file tree

Showing 12 changed files with 114 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -17,6 +17,7 @@ Online Examples:
 
 * [🎬 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
 
@@ -43,7 +44,6 @@ import 'mini-canvas-editor/css/editor.css';
 To create the editor write the below code:
 
 ```ts
-// ...
 Editor.createBlank(placeholder, 200, 300, {});
 ```
 
@@ -54,8 +54,8 @@ Add the below code to your head section in HTML document.
 ```html
 <head>
 ...
-<link href="https://cdn.jsdelivr.net/npm/[email protected].2/css/editor.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/[email protected].2/dist/index.umd.min.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/[email protected].3/css/editor.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/[email protected].3/dist/index.umd.js"></script>
 ```
 
 Call the editor by:

diff --git a/core/package.json b/core/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "mini-canvas-core",
 	"description": "Core library for Mini Canvas Editor.",
-	"version": "0.0.2",
+	"version": "0.0.3",
 	"license": "MIT",
 	"type": "module",
 	"main": "./lib/cjs/index.browser.cjs",

diff --git a/demos/svelte-app/package.json b/demos/svelte-app/package.json
@@ -14,8 +14,8 @@
 		"prettier:fix": "prettier --write ./src"
 	},
 	"dependencies": {
-		"mini-canvas-editor": "^0.0.2",
-		"mini-canvas-core": "^0.0.2",
+		"mini-canvas-editor": "^0.0.3",
+		"mini-canvas-core": "^0.0.3",
 		"fabric": "6.0.0-beta13",
 		"canvas": "^2.11.2"
 	},

diff --git a/demos/webpack-app/package.json b/demos/webpack-app/package.json
@@ -14,8 +14,8 @@
 		"prettier:fix": "prettier --write ./src"
 	},
 	"dependencies": {
-		"mini-canvas-editor": "^0.0.2",
-		"mini-canvas-core": "^0.0.2"
+		"mini-canvas-editor": "^0.0.3",
+		"mini-canvas-core": "^0.0.3"
 	},
 	"devDependencies": {
 		"ts-loader": "^9.4.2",

diff --git a/demos/webpack-app/public/inpainting-mask.html b/demos/webpack-app/public/inpainting-mask.html
@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
-		<title>🎨 Inpainting Mask - Mini Canvas Editor</title>
+		<title>🎨 Inpainting Mask Example - Mini Canvas Editor</title>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
 		<link rel="icon" href="./assets/favicon.ico" />
 		<style>
@@ -12,7 +12,7 @@
 				padding: 0;
 				font: 14px/1.5em Arial, Verdana, sans-serif;
 				min-height: 100%;
-				background: url('./assets//background-pattern.svg');
+				background: url('./assets/background-pattern.svg');
 			}
 			#placeholder {
 				width: 100%;

diff --git a/demos/webpack-app/public/template-creator.html b/demos/webpack-app/public/template-creator.html
@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
-		<title>🎬 Template Creator - Mini Canvas Editor</title>
+		<title>🎬 Template Creator Example - Mini Canvas Editor</title>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
 		<link rel="icon" href="./assets/favicon.ico" />
 		<style>
@@ -11,7 +11,7 @@
 				margin: 0;
 				padding: 0;
 				font: 14px/1.5em Arial, Verdana, sans-serif;
-				background: url('./assets//background-pattern.svg');
+				background: url('./assets/background-pattern.svg');
 				min-height: 100%;
 			}
 			#placeholder {

diff --git a/demos/webpack-app/public/vanilla-javascript.html b/demos/webpack-app/public/vanilla-javascript.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<title>📦 Vanilla JavaScript Example - Mini Canvas Editor</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
+		<link rel="icon" href="./assets/favicon.ico" />
+		<style>
+			html,
+			body {
+				margin: 0;
+				padding: 0;
+				font: 14px/1.5em Arial, Verdana, sans-serif;
+				min-height: 100%;
+				background: url('./assets/background-pattern.svg');
+			}
+			#placeholder {
+				width: 100%;
+				height: 50vh;
+			}
+			p {
+				text-align: center;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body>
+		<div id="placeholder"></div>
+
+		<p>
+			<button id="saveButton">Save bitmap</button>
+		</p>
+		<p>
+			<a href="https://github.com/b4rtaz/mini-canvas-editor">Mini Canvas Editor</a>
+		</p>
+
+		<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/editor.css" rel="stylesheet">
+		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.umd.js"></script>
+		<script>
+			const placeholder = document.getElementById('placeholder');
+			const saveButton = document.getElementById('saveButton');
+			const editor = miniCanvasEditor.Editor.createBlank(placeholder, 200, 300, {});
+
+			saveButton.addEventListener('click', () => {
+				const a = document.createElement('a');
+				a.download = 'filename.png';
+				a.href = editor.render().toDataURL('image/png');
+				a.click();
+			}, false);
+		</script>
+	</body>
+</html>
diff --git a/editor/package.json b/editor/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "mini-canvas-editor",
 	"description": "Canvas editor component for JavaScript application. Easy to integrate and use.",
-	"version": "0.0.2",
+	"version": "0.0.3",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",
@@ -50,17 +50,18 @@
 		"prettier:fix": "prettier --write ./src ./css"
 	},
 	"dependencies": {
-		"mini-canvas-core": "^0.0.2"
+		"mini-canvas-core": "^0.0.3"
 	},
 	"peerDependencies": {
-		"mini-canvas-core": "^0.0.2"
+		"mini-canvas-core": "^0.0.3"
 	},
 	"devDependencies": {
 		"tslib": "^2.6.2",
 		"rollup": "^4.0.2",
 		"rollup-plugin-dts": "^6.1.0",
 		"rollup-plugin-typescript2": "^0.36.0",
 		"@rollup/plugin-node-resolve": "^15.2.2",
+		"@rollup/plugin-terser": "^0.4.4",
 		"typescript": "^5.2.2",
 		"prettier": "^3.0.3",
 		"@typescript-eslint/eslint-plugin": "^6.7.5",

diff --git a/editor/rollup.config.mjs b/editor/rollup.config.mjs
@@ -1,6 +1,7 @@
 import dts from 'rollup-plugin-dts';
 import typescript from 'rollup-plugin-typescript2';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
+import terser from '@rollup/plugin-terser';
 import fs from 'fs';
 
 const packageJson = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
@@ -43,7 +44,8 @@ export default [
 			nodeResolve({
 				browser: true,
 			}),
-			ts
+			ts,
+			terser()
 		],
 		output: [
 			{

diff --git a/editor/src/editor.ts b/editor/src/editor.ts
@@ -129,6 +129,7 @@ export class Editor {
 		this.state.canvas.setHeight(this.state.canvas.workspaceHeight);
 		this.state.canvas.setZoom(1);
 		this.state.canvas.absolutePan(new Point(0, 0));
+		this.state.canvas.workspaceBackground.visible = false;
 
 		const result = this.state.canvas.toCanvasElement(1, {
 			left: 0,
@@ -141,6 +142,7 @@ export class Editor {
 		this.state.canvas.setWidth(currentWidth);
 		this.state.canvas.setHeight(currentHeight);
 		this.state.canvas.setViewportTransform(currentViewport);
+		this.state.canvas.workspaceBackground.visible = true;
 
 		activeObjects.forEach(({ object, controls, hasBorders }) => {
 			object.controls = controls;

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/scripts/set-version.cjs b/scripts/set-version.cjs
@@ -12,6 +12,10 @@ const dependencies = [
 	'mini-canvas-editor'
 ];
 
+function resolvePath(filePath) {
+	return path.join(__dirname, '..', filePath);
+}
+
 function updateDependencies(deps) {
 	if (!deps) {
 		return;
@@ -24,7 +28,7 @@ function updateDependencies(deps) {
 }
 
 function updatePackage(filePath, setVersion) {
-	filePath = path.join(__dirname, '..', filePath);
+	filePath = resolvePath(filePath);
 	const json = JSON.parse(fs.readFileSync(filePath, 'utf-8'));
 
 	if (setVersion) {
@@ -37,7 +41,21 @@ function updatePackage(filePath, setVersion) {
 	fs.writeFileSync(filePath, JSON.stringify(json, null, '\t'), 'utf-8');
 }
 
+function updateJsdelivrUrl(filePath) {
+	filePath = resolvePath(filePath);
+	let text = fs.readFileSync(filePath, 'utf-8');
+
+	text = text.replace(/\/\/cdn\.jsdelivr\.net\/npm\/mini-canvas-editor@\d+\.\d+\.\d+/g, (found) => {
+		const parts = found.split('@');
+		return `${parts[0]}@${version}`;
+	});
+
+	fs.writeFileSync(filePath, text, 'utf-8');
+}
+
 updatePackage('core/package.json', true);
 updatePackage('editor/package.json', true);
 updatePackage('demos/webpack-app/package.json', false);
 updatePackage('demos/svelte-app/package.json', false);
+updateJsdelivrUrl('README.md');
+updateJsdelivrUrl('demos/webpack-app/public/vanilla-javascript.html');