diff --git a/.github/cover.jpg b/.github/cover.jpg new file mode 100644 index 0000000..beafce8 Binary files /dev/null and b/.github/cover.jpg differ diff --git a/README.md b/README.md index 600056e..6a35fff 100644 --- 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 +
+... + + +``` + +Call the designer by: + +```js +miniCanvasEditor.Editor.createBlank(placeholder, 200, 300, {}); +``` ## 💡 License diff --git a/canvas/.gitignore b/core/.gitignore similarity index 100% rename from canvas/.gitignore rename to core/.gitignore diff --git a/canvas/README.md b/core/README.md similarity index 100% rename from canvas/README.md rename to core/README.md diff --git a/canvas/package.json b/core/package.json similarity index 98% rename from canvas/package.json rename to core/package.json index 681a508..a3c6bd2 100644 --- a/canvas/package.json +++ b/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 b/core/rollup.config.mjs similarity index 100% rename from canvas/rollup.config.mjs rename to core/rollup.config.mjs diff --git a/canvas/src/canvas-grid.ts b/core/src/canvas-grid.ts similarity index 100% rename from canvas/src/canvas-grid.ts rename to core/src/canvas-grid.ts diff --git a/canvas/src/index.ts b/core/src/index.ts similarity index 100% rename from canvas/src/index.ts rename to core/src/index.ts diff --git a/canvas/src/mce-canvas.ts b/core/src/mce-canvas.ts similarity index 100% rename from canvas/src/mce-canvas.ts rename to core/src/mce-canvas.ts diff --git a/canvas/src/mce-image-json.ts b/core/src/mce-image-json.ts similarity index 100% rename from canvas/src/mce-image-json.ts rename to core/src/mce-image-json.ts diff --git a/canvas/src/mce-static-canvas.ts b/core/src/mce-static-canvas.ts similarity index 100% rename from canvas/src/mce-static-canvas.ts rename to core/src/mce-static-canvas.ts diff --git a/canvas/src/replacer/fit-image.ts b/core/src/replacer/fit-image.ts similarity index 100% rename from canvas/src/replacer/fit-image.ts rename to core/src/replacer/fit-image.ts diff --git a/canvas/src/replacer/index.ts b/core/src/replacer/index.ts similarity index 100% rename from canvas/src/replacer/index.ts rename to core/src/replacer/index.ts diff --git a/canvas/src/replacer/mce-canvas-replacer.ts b/core/src/replacer/mce-canvas-replacer.ts similarity index 100% rename from canvas/src/replacer/mce-canvas-replacer.ts rename to core/src/replacer/mce-canvas-replacer.ts diff --git a/canvas/src/replacer/stretch-image.ts b/core/src/replacer/stretch-image.ts similarity index 100% rename from canvas/src/replacer/stretch-image.ts rename to core/src/replacer/stretch-image.ts diff --git a/canvas/src/shapes/index.ts b/core/src/shapes/index.ts similarity index 100% rename from canvas/src/shapes/index.ts rename to core/src/shapes/index.ts diff --git a/canvas/src/shapes/mce-image.ts b/core/src/shapes/mce-image.ts similarity index 100% rename from canvas/src/shapes/mce-image.ts rename to core/src/shapes/mce-image.ts diff --git a/canvas/src/shapes/mce-path.ts b/core/src/shapes/mce-path.ts similarity index 100% rename from canvas/src/shapes/mce-path.ts rename to core/src/shapes/mce-path.ts diff --git a/canvas/src/shapes/mce-rect.ts b/core/src/shapes/mce-rect.ts similarity index 100% rename from canvas/src/shapes/mce-rect.ts rename to core/src/shapes/mce-rect.ts diff --git a/canvas/src/shapes/mce-textbox.ts b/core/src/shapes/mce-textbox.ts similarity index 100% rename from canvas/src/shapes/mce-textbox.ts rename to core/src/shapes/mce-textbox.ts diff --git a/canvas/tsconfig.json b/core/tsconfig.json similarity index 100% rename from canvas/tsconfig.json rename to core/tsconfig.json diff --git a/demos/svelte-app/package.json b/demos/svelte-app/package.json index 95983c7..449499b 100644 --- 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 index 6ff1392..508d7b7 100644 --- 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 index 9540f67..d682244 100644 --- 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 index 089e8b3..5ea8a17 100644 --- 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 index 12526ef..6f070dd 100644 --- 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 index 1dc6cc9..0209f90 100644 --- 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 index c0ad0ca..fe68c54 100644 --- 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 index cbe0498..768548f 100644 --- 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 index a20573f..97c733f 100644 --- 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 index b991ee6..4989086 100644 --- 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 index 11f3385..4ab9c14 100644 --- 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 index c603c66..86047ad 100644 --- 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 index 1702834..ca28f05 100644 --- 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