rename.

img-js · Oct 15, 2023 · ac4b4e4 · ac4b4e4
1 parent 1d214d2
commit ac4b4e4
Show file tree

Hide file tree

Showing 51 changed files with 117 additions and 40 deletions.
diff --git a/.github/cover.jpg b/.github/cover.jpg
diff --git a/README.md b/README.md
@@ -1,6 +1,10 @@
+![Mini Canvas Editor](.github/cover.png)
+
 # 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 60 KB. Uses Fabric.js internally.
+[![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) [![License: MIT](https://img.shields.io/badge/license-MIT-green?style=flat-square)](/LICENSE) [![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.
 
 Main use cases:
 
@@ -11,8 +15,29 @@ Main use cases:
 
 Online Examples:
 
-* [🎨 Inpainting Mask](demos/webpack-app/public/inpainting-mask.html)
-* [🎬 Template Creator](demos/webpack-app/public/template-creator.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)
+
+## 🚀 Installation
+
+To use the editor you should add JS/TS files and CSS files to your project.
+
+### CDN
+
+Add the below code to your head section in HTML document.
+
+```html
+<head>
+...
+<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.min.js"></script>
+```
+
+Call the designer by:
+
+```js
+miniCanvasEditor.Editor.createBlank(placeholder, 200, 300, {});
+```
 
 ## 💡 License
 

diff --git a/canvas/.gitignore → core/.gitignore b/canvas/.gitignore → core/.gitignore
diff --git a/canvas/README.md → core/README.md b/canvas/README.md → core/README.md
diff --git a/canvas/package.json → core/package.json b/canvas/package.json → core/package.json
@@ -1,5 +1,5 @@
 {
-	"name": "mini-canvas",
+	"name": "mini-canvas-core",
 	"description": "Core library for Mini Canvas Editor.",
 	"version": "0.0.1",
 	"license": "MIT",

diff --git a/canvas/rollup.config.mjs → core/rollup.config.mjs b/canvas/rollup.config.mjs → core/rollup.config.mjs
diff --git a/canvas/src/canvas-grid.ts → core/src/canvas-grid.ts b/canvas/src/canvas-grid.ts → core/src/canvas-grid.ts
diff --git a/canvas/src/index.ts → core/src/index.ts b/canvas/src/index.ts → core/src/index.ts
diff --git a/canvas/src/mce-canvas.ts → core/src/mce-canvas.ts b/canvas/src/mce-canvas.ts → core/src/mce-canvas.ts
diff --git a/canvas/src/mce-image-json.ts → core/src/mce-image-json.ts b/canvas/src/mce-image-json.ts → core/src/mce-image-json.ts
diff --git a/canvas/src/mce-static-canvas.ts → core/src/mce-static-canvas.ts b/canvas/src/mce-static-canvas.ts → core/src/mce-static-canvas.ts
diff --git a/canvas/src/replacer/fit-image.ts → core/src/replacer/fit-image.ts b/canvas/src/replacer/fit-image.ts → core/src/replacer/fit-image.ts
diff --git a/canvas/src/replacer/index.ts → core/src/replacer/index.ts b/canvas/src/replacer/index.ts → core/src/replacer/index.ts
diff --git a/canvas/src/replacer/mce-canvas-replacer.ts → core/src/replacer/mce-canvas-replacer.ts b/canvas/src/replacer/mce-canvas-replacer.ts → core/src/replacer/mce-canvas-replacer.ts
diff --git a/canvas/src/replacer/stretch-image.ts → core/src/replacer/stretch-image.ts b/canvas/src/replacer/stretch-image.ts → core/src/replacer/stretch-image.ts
diff --git a/canvas/src/shapes/index.ts → core/src/shapes/index.ts b/canvas/src/shapes/index.ts → core/src/shapes/index.ts
diff --git a/canvas/src/shapes/mce-image.ts → core/src/shapes/mce-image.ts b/canvas/src/shapes/mce-image.ts → core/src/shapes/mce-image.ts
diff --git a/canvas/src/shapes/mce-path.ts → core/src/shapes/mce-path.ts b/canvas/src/shapes/mce-path.ts → core/src/shapes/mce-path.ts
diff --git a/canvas/src/shapes/mce-rect.ts → core/src/shapes/mce-rect.ts b/canvas/src/shapes/mce-rect.ts → core/src/shapes/mce-rect.ts
diff --git a/canvas/src/shapes/mce-textbox.ts → core/src/shapes/mce-textbox.ts b/canvas/src/shapes/mce-textbox.ts → core/src/shapes/mce-textbox.ts
diff --git a/canvas/tsconfig.json → core/tsconfig.json b/canvas/tsconfig.json → core/tsconfig.json
diff --git a/demos/svelte-app/package.json b/demos/svelte-app/package.json
@@ -15,7 +15,7 @@
 	},
 	"dependencies": {
 		"mini-canvas-editor": "^0.0.1",
-		"mini-canvas": "^0.0.1",
+		"mini-canvas-core": "^0.0.1",
 		"fabric": "6.0.0-beta13",
 		"canvas": "^2.11.2"
 	},

diff --git a/demos/svelte-app/src/routes/backend/+server.ts b/demos/svelte-app/src/routes/backend/+server.ts
@@ -1,4 +1,4 @@
-import { MceStaticCanvas, type MceImageJSON } from 'mini-canvas/node';
+import { MceStaticCanvas, type MceImageJSON } from 'mini-canvas-core/node';
 
 export async function POST({ request }: { request: Request }) {
 	const json = (await request.json()) as MceImageJSON;

diff --git a/demos/webpack-app/package.json b/demos/webpack-app/package.json
@@ -15,7 +15,7 @@
 	},
 	"dependencies": {
 		"mini-canvas-editor": "^0.0.1",
-		"mini-canvas": "^0.0.1"
+		"mini-canvas-core": "^0.0.1"
 	},
 	"devDependencies": {
 		"ts-loader": "^9.4.2",

diff --git a/demos/webpack-app/src/inpainting-mask.ts b/demos/webpack-app/src/inpainting-mask.ts
@@ -1,5 +1,5 @@
 import { Editor, EditorMode } from 'mini-canvas-editor';
-import { MceImage } from 'mini-canvas';
+import { MceImage } from 'mini-canvas-core';
 
 import 'mini-canvas-editor/css/editor.css';
 

diff --git a/demos/webpack-app/src/template-creator.ts b/demos/webpack-app/src/template-creator.ts
@@ -1,5 +1,5 @@
 import { Editor } from 'mini-canvas-editor';
-import { MceRect, MceTextbox } from 'mini-canvas';
+import { MceRect, MceTextbox } from 'mini-canvas-core';
 
 import 'mini-canvas-editor/css/editor.css';
 

diff --git a/editor/package.json b/editor/package.json
@@ -5,7 +5,6 @@
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",
-	"private": true,
 	"exports": {
 		".": {
 			"types": {
@@ -51,10 +50,10 @@
 		"prettier:fix": "prettier --write ./src ./css"
 	},
 	"dependencies": {
-		"mini-canvas": "^0.0.1"
+		"mini-canvas-core": "^0.0.1"
 	},
 	"peerDependencies": {
-		"mini-canvas": "^0.0.1"
+		"mini-canvas-core": "^0.0.1"
 	},
 	"devDependencies": {
 		"tslib": "^2.6.2",

diff --git a/editor/src/editor-state.ts b/editor/src/editor-state.ts
@@ -1,4 +1,4 @@
-import { FabricObject, MceCanvas, Point } from 'mini-canvas';
+import { FabricObject, MceCanvas, Point } from 'mini-canvas-core';
 import { SimpleEvent } from './core/simple-event';
 import { BrushModeConfiguration, EditorConfiguration, EditorMode, RectModeConfiguration } from './editor-configuration';
 

diff --git a/editor/src/editor.ts b/editor/src/editor.ts
@@ -5,7 +5,7 @@ import { EditorConfiguration } from './editor-configuration';
 import { Toolbox } from './toolbox/toolbox';
 import { SimpleEvent } from './core/simple-event';
 import { EditorState } from './editor-state';
-import { FabricObject, MceImage, MceImageJSON, MceStaticCanvas, Point } from 'mini-canvas';
+import { FabricObject, MceImage, MceImageJSON, MceStaticCanvas, Point } from 'mini-canvas-core';
 import { LayoutController } from './layout-controller';
 import { Toolbar } from './toolbar/toolbar';
 

diff --git a/editor/src/sidebar/layers/layer-item.ts b/editor/src/sidebar/layers/layer-item.ts
@@ -3,7 +3,7 @@ import { Component } from '../../components/component';
 import { IconButtonComponent, iconButtonComponent } from '../../components/icon-button-component';
 import { Html } from '../../core/html';
 import { Icons } from '../../core/icons';
-import { FabricObject } from 'mini-canvas';
+import { FabricObject } from 'mini-canvas-core';
 
 export class LayerItem implements Component {
 	public static create(state: EditorState, object: FabricObject, isFirst: boolean, isLast: boolean) {

diff --git a/editor/src/sidebar/properties/editors/color-property-editor.ts b/editor/src/sidebar/properties/editors/color-property-editor.ts
@@ -1,7 +1,7 @@
 import { Html } from '../../../core/html';
 import { DestroyableComponent } from '../../../components/component';
 import { simplePropertyEditor } from './simple-property-editor';
-import { TFiller } from 'mini-canvas';
+import { TFiller } from 'mini-canvas-core';
 import { PropertyAccessor } from '../property-accessor';
 
 type FillType = string | TFiller | null;

diff --git a/editor/src/sidebar/properties/object-properties-editor.ts b/editor/src/sidebar/properties/object-properties-editor.ts
@@ -1,4 +1,4 @@
-import { FabricObject, ObjectEvents } from 'mini-canvas';
+import { FabricObject, ObjectEvents } from 'mini-canvas-core';
 import { DestroyableComponent } from '../../components/component';
 import { Html } from '../../core/html';
 import { EditorState } from '../../editor-state';

diff --git a/editor/src/sidebar/properties/root-properties-editor.ts b/editor/src/sidebar/properties/root-properties-editor.ts
@@ -1,4 +1,4 @@
-import { CanvasEvents, MceCanvas } from 'mini-canvas/.';
+import { CanvasEvents, MceCanvas } from 'mini-canvas-core';
 import { DestroyableComponent } from '../../components/component';
 import { EditorState } from '../../editor-state';
 import { numberPropertyEditor } from './editors/number-property-editor';

diff --git a/editor/src/sidebar/properties/shapes/circle-shape-editor.ts b/editor/src/sidebar/properties/shapes/circle-shape-editor.ts
@@ -1,7 +1,7 @@
 import { UpdateManager } from '../update-manager';
 import { DestroyableComponent } from '../../../components/component';
 import { commonShapeEditor } from './common-shape-editor';
-import { Circle } from 'mini-canvas';
+import { Circle } from 'mini-canvas-core';
 
 export function circleShapeEditor(manager: UpdateManager<Circle>): DestroyableComponent {
 	return commonShapeEditor(manager, []);

diff --git a/editor/src/sidebar/properties/shapes/common-shape-editor.ts b/editor/src/sidebar/properties/shapes/common-shape-editor.ts
@@ -1,4 +1,4 @@
-import { FabricObject } from 'mini-canvas/.';
+import { FabricObject } from 'mini-canvas-core';
 import { DestroyableComponent } from '../../../components/component';
 import { numberPropertyEditor } from '../editors/number-property-editor';
 import { propertyEditorRow } from '../layout/property-editor-row';

diff --git a/editor/src/sidebar/properties/shapes/image-shape-editor.ts b/editor/src/sidebar/properties/shapes/image-shape-editor.ts
@@ -1,7 +1,7 @@
 import { UpdateManager } from '../update-manager';
 import { DestroyableComponent } from '../../../components/component';
 import { commonShapeEditor } from './common-shape-editor';
-import { MceImage } from 'mini-canvas';
+import { MceImage } from 'mini-canvas-core';
 import { propertyEditorRow } from '../layout/property-editor-row';
 import { numberPropertyEditor } from '../editors/number-property-editor';
 

diff --git a/editor/src/sidebar/properties/shapes/rect-shape-editor.ts b/editor/src/sidebar/properties/shapes/rect-shape-editor.ts
@@ -4,7 +4,7 @@ import { numberPropertyEditor } from '../editors/number-property-editor';
 import { DestroyableComponent } from '../../../components/component';
 import { commonShapeEditor } from './common-shape-editor';
 import { colorPropertyEditor } from '../editors/color-property-editor';
-import { MceRect } from 'mini-canvas';
+import { MceRect } from 'mini-canvas-core';
 
 export function rectShapeEditor(manager: UpdateManager<MceRect>): DestroyableComponent {
 	const row1 = propertyEditorRow([

diff --git a/editor/src/sidebar/properties/shapes/shape-editor-factory.ts b/editor/src/sidebar/properties/shapes/shape-editor-factory.ts
@@ -5,7 +5,7 @@ import { rectShapeEditor } from './rect-shape-editor';
 import { circleShapeEditor } from './circle-shape-editor';
 import { imageShapeEditor } from './image-shape-editor';
 import { unknownShapeEditor } from './unknown-shape-editor';
-import { Circle, FabricObject, MceImage, MceRect, MceTextbox, ObjectEvents } from 'mini-canvas';
+import { Circle, FabricObject, MceImage, MceRect, MceTextbox, ObjectEvents } from 'mini-canvas-core';
 
 export class ShapeEditorFactory {
 	public static create(type: string, manager: UpdateManager<FabricObject, ObjectEvents>): DestroyableComponent {

diff --git a/editor/src/sidebar/properties/shapes/textbox-shape-editor.ts b/editor/src/sidebar/properties/shapes/textbox-shape-editor.ts
@@ -5,7 +5,7 @@ import { propertyEditorRow } from '../layout/property-editor-row';
 import { numberPropertyEditor } from '../editors/number-property-editor';
 import { choicePropertyEditor } from '../editors/choice-property-editor';
 import { colorPropertyEditor } from '../editors/color-property-editor';
-import { MceTextbox, MceVerticalAlign } from 'mini-canvas';
+import { MceTextbox, MceVerticalAlign } from 'mini-canvas-core';
 
 export function textShapeEditor(manager: UpdateManager<MceTextbox>): DestroyableComponent {
 	const row1 = propertyEditorRow([

diff --git a/editor/src/sidebar/properties/shapes/unknown-shape-editor.ts b/editor/src/sidebar/properties/shapes/unknown-shape-editor.ts
@@ -1,7 +1,7 @@
 import { UpdateManager } from '../update-manager';
 import { DestroyableComponent } from '../../../components/component';
 import { commonShapeEditor } from './common-shape-editor';
-import { FabricObject } from 'mini-canvas';
+import { FabricObject } from 'mini-canvas-core';
 
 export function unknownShapeEditor(manager: UpdateManager<FabricObject>): DestroyableComponent {
 	return commonShapeEditor(manager, []);

diff --git a/editor/src/sidebar/properties/update-manager.ts b/editor/src/sidebar/properties/update-manager.ts
@@ -1,6 +1,6 @@
 import { EditorState } from '../../editor-state';
 import { SimpleEvent } from '../../core/simple-event';
-import { Observable } from 'mini-canvas';
+import { Observable } from 'mini-canvas-core';
 import { PropertyAccessor } from './property-accessor';
 
 export class UpdateManager<Obj extends Observable<EventSpec>, EventSpec = unknown> {

diff --git a/editor/src/toolbox/actions/open-image-action.ts b/editor/src/toolbox/actions/open-image-action.ts
@@ -1,4 +1,4 @@
-import { MceImage } from 'mini-canvas';
+import { MceImage } from 'mini-canvas-core';
 import { EditorState } from '../../editor-state';
 import { openImageFile } from './open-image-file';
 

diff --git a/editor/src/workspace/modes/box-painter.ts b/editor/src/workspace/modes/box-painter.ts
@@ -1,4 +1,4 @@
-import { FabricObject, TPointerEvent, TPointerEventInfo } from 'mini-canvas';
+import { FabricObject, TPointerEvent, TPointerEventInfo } from 'mini-canvas-core';
 import { SimpleEvent } from '../../core/simple-event';
 import { SelectionReverter, EditorState } from '../../editor-state';
 

diff --git a/editor/src/workspace/modes/brush-workspace-mode.ts b/editor/src/workspace/modes/brush-workspace-mode.ts
@@ -1,4 +1,4 @@
-import { McePath, Path, PencilBrush } from 'mini-canvas';
+import { McePath, Path, PencilBrush } from 'mini-canvas-core';
 import { EditorState } from '../../editor-state';
 import { WorkspaceMode } from './workspace-mode';
 

diff --git a/editor/src/workspace/modes/rect-workspace-mode.ts b/editor/src/workspace/modes/rect-workspace-mode.ts
@@ -1,4 +1,4 @@
-import { MceRect } from 'mini-canvas';
+import { MceRect } from 'mini-canvas-core';
 import { EditorState } from '../../editor-state';
 import { BoxPainter } from './box-painter';
 import { WorkspaceMode } from './workspace-mode';

diff --git a/editor/src/workspace/modes/textbox-workspace-mode.ts b/editor/src/workspace/modes/textbox-workspace-mode.ts
@@ -1,4 +1,4 @@
-import { MceTextbox, Rect } from 'mini-canvas';
+import { MceTextbox, Rect } from 'mini-canvas-core';
 import { EditorState } from '../../editor-state';
 import { BoxPainter } from './box-painter';
 import { WorkspaceMode } from './workspace-mode';

diff --git a/editor/src/workspace/workspace.ts b/editor/src/workspace/workspace.ts
@@ -4,7 +4,7 @@ import { EditorConfiguration, EditorMode } from '../editor-configuration';
 import { WorkspaceMode } from './modes/workspace-mode';
 import { EditorState } from '../editor-state';
 import { WorkspaceModeFactory } from './modes/workspace-mode-factory';
-import { MceCanvas, Point, TPointerEventInfo } from 'mini-canvas';
+import { MceCanvas, Point, TPointerEventInfo } from 'mini-canvas-core';
 
 export class Workspace implements Component {
 	public static create(workspaceWidth: number, workspaceHeight: number, configuration: EditorConfiguration) {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -1,5 +1,5 @@
 packages:
-  - './canvas'
+  - './core'
   - './editor'
   - './demos/svelte-app'
   - './demos/webpack-app'
diff --git a/scripts/publish.sh b/scripts/publish.sh
@@ -0,0 +1,11 @@
+#!/bin/bash
+
+cd "$(dirname "${BASH_SOURCE[0]}")"
+
+cd ../cavas
+pnpm build
+npm publish
+
+cd ../editor
+pnpm build
+npm publish
diff --git a/scripts/set-version.cjs b/scripts/set-version.cjs
@@ -0,0 +1,42 @@
+const fs = require('fs');
+const path = require('path');
+
+const version = process.argv[2];
+if (!version || !(/^\d+\.\d+\.\d+$/.test(version))) {
+	console.log('Usage: node set-version.js 1.2.3');
+	return;
+}
+
+const dependencies = [
+	'sequential-workflow-editor-model',
+	'sequential-workflow-editor'
+];
+
+function updateDependencies(deps) {
+	if (!deps) {
+		return;
+	}
+	for (const name in deps) {
+		if (dependencies.includes(name)) {
+			deps[name] = `^${version}`;
+		}
+	}
+}
+
+function updatePackage(filePath, setVersion) {
+	filePath = path.join(__dirname, '..', filePath);
+	const json = JSON.parse(fs.readFileSync(filePath, 'utf-8'));
+
+	if (setVersion) {
+		json['version'] = version;
+	}
+	updateDependencies(json['dependencies']);
+	updateDependencies(json['peerDependencies']);
+	updateDependencies(json['devDependencies']);
+
+	fs.writeFileSync(filePath, JSON.stringify(json, null, '\t'), 'utf-8');
+}
+
+updatePackage('model/package.json', true);
+updatePackage('editor/package.json', true);
+updatePackage('demos/webpack-app/package.json', false);