Skip to content

Commit e8078bb

Browse files
b4rtazb4rtaz
committed
0.0.8.
1 parent 48d186f commit e8078bb

File tree

7 files changed

+65
-24
lines changed

7 files changed

+65
-24
lines changed

‎README.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
# Mini Canvas Editor
44

5-
[![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)
5+
[![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)
66

77
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.
88

@@ -15,9 +15,9 @@ Main use cases:
1515

1616
Online Examples:
1717

18-
* [🎬 Template Creator](https://img-js.github.io/mini-canvas-editor/webpack-app/public/template-creator.html)
19-
* [🎨 Inpainting Mask](https://img-js.github.io/mini-canvas-editor/webpack-app/public/inpainting-mask.html)
20-
* [📦 Vanilla JavaScript](https://img-js.github.io/mini-canvas-editor/webpack-app/public/vanilla-javascript.html)
18+
* [🎬 Template Creator](https://b4rtaz.github.io/mini-canvas-editor/webpack-app/public/template-creator.html)
19+
* [🎨 Inpainting Mask](https://b4rtaz.github.io/mini-canvas-editor/webpack-app/public/inpainting-mask.html)
20+
* [📦 Vanilla JavaScript](https://b4rtaz.github.io/mini-canvas-editor/webpack-app/public/vanilla-javascript.html)
2121

2222
## 🚀 Installation
2323

‎demos/svelte-app/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414
"prettier:fix": "prettier --write ./src"
1515
},
1616
"dependencies": {
17-
"mini-canvas-editor": "^0.0.7",
18-
"mini-canvas-core": "^0.0.7",
17+
"mini-canvas-editor": "^0.0.8",
18+
"mini-canvas-core": "^0.0.8",
1919
"fabric": "6.0.0-beta13",
2020
"canvas": "^2.11.2"
2121
},
@@ -30,4 +30,4 @@
3030
"prettier": "^3.0.3"
3131
},
3232
"type": "module"
33-
}
33+
}

‎demos/webpack-app/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414
"prettier:fix": "prettier --write ./src"
1515
},
1616
"dependencies": {
17-
"mini-canvas-editor": "^0.0.7",
18-
"mini-canvas-core": "^0.0.7"
17+
"mini-canvas-editor": "^0.0.8",
18+
"mini-canvas-core": "^0.0.8"
1919
},
2020
"devDependencies": {
2121
"ts-loader": "^9.4.2",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
</div>
4242

4343
<p>
44-
<a href="https://github.com/b4rtaz/mini-canvas-editor">Mini Canvas Editor</a>
44+
<a href="https://github.com/img-js/mini-canvas-editor">Mini Canvas Editor</a>
4545
</p>
4646
</body>
4747
</html>

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,14 @@
4343

4444
<p>Rects named $cat are replaced with a cat image, $name variables in texboxes are replaced by some name.</p>
4545

46+
<p><button id="resetTemplateButton">Reset template</button></p>
47+
4648
<div class="debug">
4749
<img id="preview" />
4850
</div>
4951

5052
<p>
51-
<a href="https://github.com/b4rtaz/mini-canvas-editor">Mini Canvas Editor</a>
53+
<a href="https://github.com/img-js/mini-canvas-editor">Mini Canvas Editor</a>
5254
</p>
5355
</body>
5456
</html>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,11 @@
3131
<button id="saveButton">Save bitmap</button>
3232
</p>
3333
<p>
34-
<a href="https://github.com/b4rtaz/mini-canvas-editor">Mini Canvas Editor</a>
34+
<a href="https://github.com/img-js/mini-canvas-editor">Mini Canvas Editor</a>
3535
</p>
3636

37-
<link href="https://cdn.jsdelivr.net/npm/mini-canvas-editor@0.0.7/css/editor.css" rel="stylesheet">
38-
<script src="https://cdn.jsdelivr.net/npm/mini-canvas-editor@0.0.7/dist/index.umd.js"></script>
37+
<link href="https://cdn.jsdelivr.net/npm/mini-canvas-editor@0.0.8/css/editor.css" rel="stylesheet">
38+
<script src="https://cdn.jsdelivr.net/npm/mini-canvas-editor@0.0.8/dist/index.umd.js"></script>
3939
<script>
4040
const placeholder = document.getElementById('placeholder');
4141
const saveButton = document.getElementById('saveButton');

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

Lines changed: 49 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import { Editor } from 'mini-canvas-editor';
2-
import { MceRect, MceTextbox } from 'mini-canvas-core';
2+
import { MceImageJSON, MceRect, MceTextbox } from 'mini-canvas-core';
33

44
import 'mini-canvas-editor/css/editor.css';
55

66
export class App {
7-
public static async create(): Promise<App> {
7+
public static async create(reset: boolean): Promise<App> {
88
const placeholder = document.getElementById('placeholder') as HTMLElement;
99
const preview = document.getElementById('preview') as HTMLImageElement;
1010

11-
const saved = localStorage['mceTemplateCreator'];
11+
const saved = Storage.tryGet();
1212
let editor: Editor;
13-
if (saved) {
14-
editor = await Editor.createFromJSON(JSON.parse(saved), placeholder, {});
13+
if (saved && !reset) {
14+
editor = await Editor.createFromJSON(saved, placeholder, {});
1515
} else {
1616
editor = Editor.createBlank(placeholder, 400, 300, {});
1717
editor.add(
@@ -40,7 +40,8 @@ export class App {
4040
fontSize: 40,
4141
left: 140,
4242
top: 52,
43-
width: 240
43+
width: 240,
44+
maxHeight: 60
4445
})
4546
);
4647
editor.add(
@@ -49,7 +50,8 @@ export class App {
4950
left: 140,
5051
top: 120,
5152
width: 240,
52-
fill: '#8c8c8c'
53+
fill: '#8c8c8c',
54+
maxHeight: 30
5355
})
5456
);
5557
}
@@ -59,7 +61,7 @@ export class App {
5961
preview.src = png;
6062

6163
const json = editor.toJSON();
62-
localStorage['mceTemplateCreator'] = JSON.stringify(json);
64+
Storage.set(json);
6365
});
6466
const app = new App(editor, preview);
6567
editor.onChanged.subscribe(app.reloadPreview);
@@ -86,7 +88,7 @@ export class App {
8688
layers.forEach(layer => {
8789
if (layer.type === 'textbox') {
8890
const text = replacer.getText(layer);
89-
const newText = text.replace('$name', 'Tosiek').replace('$time', new Date().toLocaleTimeString());
91+
const newText = text.replace('$name', 'Tosiek').replace('$time', new Date().toLocaleString());
9092
if (newText !== text) {
9193
replacer.replaceText(layer, newText);
9294
}
@@ -98,6 +100,43 @@ export class App {
98100

99101
this.preview.src = canvas.exportToDataURL('png');
100102
};
103+
104+
public async destroy() {
105+
await this.editor.destroy();
106+
}
107+
}
108+
109+
const localStorageKey = 'mceTemplateCreator_v2';
110+
111+
export class Storage {
112+
public static tryGet(): MceImageJSON | undefined {
113+
const raw = localStorage[localStorageKey];
114+
return raw ? JSON.parse(raw) : undefined;
115+
}
116+
117+
public static set(json: MceImageJSON) {
118+
localStorage[localStorageKey] = JSON.stringify(json);
119+
}
120+
121+
public static clear() {
122+
localStorage.removeItem(localStorageKey);
123+
}
124+
}
125+
126+
async function load() {
127+
const resetTemplateButton = document.getElementById('resetTemplateButton');
128+
let app = await App.create(false);
129+
130+
resetTemplateButton?.addEventListener(
131+
'click',
132+
async e => {
133+
e.preventDefault();
134+
await app.destroy();
135+
Storage.clear();
136+
app = await App.create(true);
137+
},
138+
false
139+
);
101140
}
102141

103-
document.addEventListener('DOMContentLoaded', App.create, false);
142+
document.addEventListener('DOMContentLoaded', load, false);

0 commit comments

Comments
 (0)