diff --git a/.browserslistrc b/.browserslistrc
new file mode 100644
index 0000000..496d1ef
--- /dev/null
+++ b/.browserslistrc
@@ -0,0 +1 @@
+defaults
\ No newline at end of file
diff --git a/.eslintrc.js b/.eslintrc.js
deleted file mode 100644
index a129b12..0000000
--- a/.eslintrc.js
+++ /dev/null
@@ -1,28 +0,0 @@
-// http://eslint.org/docs/user-guide/configuring
-
-module.exports = {
- root: true,
- parserOptions: {
- sourceType: 'module'
- },
- env: {
- browser: true,
- },
- extends: 'airbnb-base',
- // check if imports actually resolve
- 'settings': {
- // 'import/resolver': {
- // 'webpack': {
- // 'config': 'webpack.config.js'
- // }
- // }
- },
- // add your custom rules here
- 'rules': {
- 'no-param-reassign': ["error", { "props": false }],
- 'no-console': ["error", { allow: ["warn", "error"] }],
- // allow debugger during development
- 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
- 'import/no-extraneous-dependencies': ["error", {"devDependencies": true}]
- }
-};
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
index 35528ed..3cc89c8 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -27,4 +27,4 @@ A clear and concise description of what you expected to happen.
If applicable, add screenshots (Don't be lazy, PrnScr, Ctrl+V)
**Browser**
- - e.g. Google Chrome 11 on WIndows
+ - e.g. Google Chrome 11 on Windows
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
new file mode 100644
index 0000000..0231f80
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -0,0 +1,14 @@
+---
+name: Feature request
+about: Create a feature which makes Painterro better
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the feature**
+A clear and concise description of what you want to see and how it should work. Step by step, then we will adjust if needed
+
+**Possible analogs?**
+Gimp, MSPaint, Inkscape, etc...
diff --git a/.gitignore b/.gitignore
index 71314f3..b5c1230 100644
--- a/.gitignore
+++ b/.gitignore
@@ -61,7 +61,6 @@ typings/
# custom
build/painterro*
+build/report*
-wp/.svn/
-wp/trunk/painterro-*.min.js
-wp/trunk/painterro-*.min.js.map
+wp/
\ No newline at end of file
diff --git a/.npmignore b/.npmignore
index 9465e44..2eafc60 100644
--- a/.npmignore
+++ b/.npmignore
@@ -62,6 +62,6 @@ typings/
# custom
build/painterro-*
-wp/.svn/
-wp/trunk/painterro-*.min.js
-wp/trunk/painterro-*.min.js.map
+wp/*
+docs/*
+
diff --git a/README.md b/README.md
index 5c35a05..a4945fe 100644
--- a/README.md
+++ b/README.md
@@ -1,52 +1,38 @@
-**[Live Demo](https://hinty.io/login/?next=/add/%3Fpainterro)** | [npm](https://www.npmjs.com/package/painterro) | [GitHub](https://github.com/devforth/painterro)
+**[live demo](https://tracklify.com/painterro_demo/)** | [npm](https://www.npmjs.com/package/painterro) | [GitHub](https://github.com/devforth/painterro)
   
+[](http://tluma.ai/ask-ai/devforth/painterro)
JavaScript painting plugin which allows editing images in a browser.
-Can be easily integrated into any website or webapp by including only one JS file and calling simple initialization code.
+Can be easily integrated into any website or webapp by calling simple initialization code.
-Save to:
+🆕 Check out our simple and game-changing opensource [Vue admin framework](https://adminforth.dev/) with a great look and extensibility!
-[![alt text][1.1]][1] [![alt text][2.1]][2] [![alt text][3.1]][3] [![alt text][4.1]][4] [![alt text][5.1]][5]
-
+> 🙏🙏🙏 Scream for help to Ukraine
+>
+> 24 February 2022, Russia started bombing cities with peacefully civilized population in whole Ukraine. And has been doing it up to this day. Breaking all laws of war. Their bombs has been killing children and adults. This deserves Hague court.
+> - 🏠 If you are from Russia, please stop your government by any means including protests, don't trust local media, they are bribed by the government. They always was. I am sure you already feel lie by unexplainable crazy things in your country caused by world sanctions.
+> - 💣 Please spread the information about bombing of Ukraine in all social way you could. Russia treacherously broke into the territory of a sovereign state. Do not trust to anything from Russian media, most likely it will be bullshit
+> - 💼 If you have any kind of business cooperation with Russia, please block it now and keep most of money on your side, this is the only possible ethical decision
+> - ☢️ Ask your government to stop Russia from spreading invasion in any way. Russia is nuclear threat to the whole world. You think it is not possible? We thought that bombing of independent country with population of 44.13 million is also not possible.
-
-
-
-
-
-
-
-
-[1.1]: res/twitter.png (Save to Twitter)
-[2.1]: res/facebook.png (Save to Facebook)
-[3.1]: res/thumblr.png (Save to Thumblr)
-[4.1]: res/linkedin.png (Save to Linkedin)
-[5.1]: res/pinterest.png (Save to Pinterest)
-
-
-
-
-[1]: https://twitter.com/home?status=https://github.com/devforth/painterro
-[2]: https://www.facebook.com/sharer/sharer.php?u=https://github.com/devforth/painterro
-[3]: http://www.tumblr.com/share?v=3&u=https%3A%2F%2Fgithub.com%2Fdevforth%2Fpainterro&t=
-[4]: http://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fgithub.com%2Fdevforth%2Fpainterro&title=
-[5]: http://pinterest.com/pin/create/button/?url=https%3A%2F%2Fgithub.com%2Fdevforth%2Fpainterro&media=&description=
-
-
Features
-=================
+========
- Paste image from clipboard with `Ctrl+V` (e.g. `PtnScr` screenshot), drag and drop it into widget, or load with file select dialog
- Crop image by defined area
- Paint primitives: line, rectangle, ellipse (alpha color can be used)
+- Brush – free drawing tool e.g. to implement finger-based signatures on tablet screens
- Add text (you can use `Ctrl+B` - bold, `Ctrl+I` - italic, `Ctrl+U` - underlined, or just pase formatted HTML)
- Rotate / resize, scale image
- Pixelize some area to hide sensitive data
- Draw arrows
+- Trash can tool to clear the canvas
+- Paint bucket tool for color fills
+- Add filters to images
@@ -54,30 +40,47 @@ Features
Used by
=================
-
+
+
+
+Advantages 💪
+=============
- It is lightweight and minimalistic - written with vanilla JS, you don't need dependencies to use it
- Designed to process images with minimal clicks, most actions support hot-keys
@@ -90,15 +93,15 @@ Originally Painterro was designed for quick screenshots processing: You make scr
then open Painterro on your website, paste an image with `Ctrl+V`,
crop it to interested area, highlight something with line/rectangle tool and/or add some text
to the image and save on server with custom save handler (e.g. simple `XHR` request to your backend).
-In addition, you can use Painterro as image editor for any kind of raster images. Please try a [demo](https://hinty.io/login/?next=/add/%3Fpainterro).
+In addition, you can use Painterro as image editor for any kind of raster images. Please try a [demo](https://tracklify.com/painterro_demo/).
Also painterro has [Wordpress Plugin](https://wordpress.org/plugins/painterro/).
If you want to see some feature in Painterro, please leave (or vote for) an issue [here](https://github.com/devforth/painterro/issues).
There is no promise that it will be implemented soon or ever, but it is interesting to know what features users want to have.
-Also some usefull hints on HINTY for you:
+Usefull hints and tweaks 😋:
-- [Painterro JS paint features review on HINTY](https://hinty.io/devforth/simplest-js-paint/)
+- [Painterro JS paint features review on HINTY](https://hinty.io/devforth/js-paint-plugin-for-your-website/)
- [Dark theme for Painterro JS paint](https://hinty.io/devforth/painterro-dark-theme/)
- [Round buttons for Painterro JS paint](https://hinty.io/devforth/how-to-round-the-painterro-buttons/)
@@ -111,19 +114,19 @@ Table of contents
* [With npm](#with-npm)
* [By including script](#by-including-script)
* [Read after installation](#read-after-installation)
- * [Supported hotkeys](#supported-hotkeys)
- * [Configuration](#configuration)
+ * [Supported hotkeys](#supported-hotkeys-)
+ * [Configuration](#configuration-)
* [Events](#events)
* [UI color scheme](#ui-color-scheme)
* [API](#api)
- * [Translation](#translation)
- * [Saving image](#saving-image)
+ * [Translation](#translation-)
+ * [Saving image](#saving-image-)
* [Base64 saving](#base64-saving)
* [Binary saving](#binary-saving)
* [Saving to WYSIWYG](#saving-to-wysiwyg)
* [Format and quality](#format-and-quality)
* [Example: Open Painterro by Ctrl+V](#example-open-painterro-by-ctrlv)
- * [Development](#development)
+ * [Development](#development-)
* [Building painterro](#building-painterro)
* [Dev-server](#dev-server)
* [Regenerating icons font](#regenerating-icons-font)
@@ -172,14 +175,14 @@ Read after installation
To be able to save edited images on server or client see [Saving image](#saving-image). For configurations see [Configuration](#configuration)
-Supported hotkeys
+Supported hotkeys ⌨
=================
-|||
+| | |
|-|-|
| `Ctrl + Z` | Cancel last operation |
| `Ctrl + V` | Paste image from clipboard |
-| `Ctrl + C` | Copy selected aria to clipboard (*internal keyboard) |
+| `Ctrl + C` | Copy selected aria to clipboard |
| `Shift` when drawing **rect**/**ellipse** | Draw **square**/**circle** |
| `Shift` when drawing **line** | draw at angles of `0`, `45`, `90`, `135` etc degrees |
| `Alt` when using pipette | Hide zoom helper (colored grid) |
@@ -188,7 +191,7 @@ Supported hotkeys
Also some tools have own one-button hotkeys e.g. `C` - crop, you could see this shortcuts if you will hold mouse on toolbutton.
-Configuration
+Configuration ⚙
=============
You can pass parameters map to Painterro constructor:
@@ -201,7 +204,7 @@ Painterro({
| Param | Description | Default |
|-|-|-|
-| `id` | If provided, then Painterro will be placed to some holder on page with this `id`, in other case holder-element will be created (fullscreen with margins) | `undefined` |
+| `id` | If provided, then Painterro will be placed to some holder on page with this `id`, in other case holder-element will be created (fullscreen with margins). Important note: If you are using your block and id option, please add `position`:`relative` or `absolute` or `fixed` on your container, default (`static`) will lead to positioning issues | `undefined` |
|`activeColor`| Line/Text color that selected by default | `'#ff0000'` |
|`activeColorAlpha` | Transparancy of `activeColor` from `0.0` to `1.0`, `0.0` = transparent | `1` |
|`activeFillColor` | Fill color that selected by default | `'#000000'` |
@@ -219,11 +222,12 @@ Painterro({
|`defaultTextStrokeAndShadow` | Enables Stroke and Shadow for text tool by default (easier recognize text on screenshots) | `true` |
|`defaultSize` | default image size, should be string in format `x` in pixel, e.g. `'200x100'`. If value is `'fill'`(default) than all container size will be used | `'fill'` |
|`defaultTool` | Tool selected by default | `'select'` |
-|`hiddenTools` | List of tools that you wish to exclude from toolbar e.g. something from this list `['crop', 'line', 'arrow', 'rect', 'ellipse', 'brush', 'text', 'rotate', 'resize', 'save', 'open', 'close']`, You can't hide default tool | `['redo']` |
+|`hiddenTools` | List of tools that you wish to exclude from toolbar. Subset from this list `['crop', 'line', 'arrow', 'rect', 'ellipse', 'brush', 'text', 'rotate', 'resize', 'save', 'open', 'close', 'undo', 'redo', 'zoomin', 'zoomout', 'bucket']`, You can't hide default tool | `['redo']` |
|`initText` | Display some centered text before painting (supports HTML). If null, no text will be shown | `null` |
|`initTextColor` | Color of init text | `'#808080'` |
|`initTextStyle` | Style of init text | `"26px 'Open Sans', sans-serif"` |
|`pixelizePixelSize` | Default pixel size of pixelize tool. Can accept values - `x` - x pixels, `x%` - means percents of minimal area rectangle side | `20%` |
+|`pixelizeHideUserInput` | Don't allow users to enter pixel size In settings tools (and save in localstorage), this would allow developer to freeze pixel size by using params `pixelizePixelSize` to make sure users will not set low pixel sizes | `false` |
|`availableLineWidths` | A list of the line width values that are available for selection in a drop down list e.g. `[1,2,4,8,16,64]`. Otherwise an input field is used. | `undefined` |
|`availableArrowLengths` | A list of the arrow sizes values that are available for selection in a drop down list e.g. `[10,20,30,40,50,60]`. Otherwise an input field is used. | `undefined` |
| `defaultArrowLength` | default arrow length | `15` |
@@ -232,12 +236,16 @@ Painterro({
|`toolbarPosition` | Whether to position the toolbar at the top or bottom. | `'bottom'` |
|`fixMobilePageReloader` | By default painterro adds overflow-y: hidden to page body on mobile devices to prevent "super smart" feature lice Chrom's reload page. Unfortunately we can't prevent it by preventDefault. If your want to scroll page when painterro is open, set this to false | `true` |
|`language` | Language of the widget. | `'en'` |
-|`how_to_paste_actions`| List of paste options that will be suggested on paste using some paste dialog e.g. `['extend_right', 'extend_down'] `. If there is only one option in list, then it will choosing automatically without dialog | `['replace_all', 'paste_over', 'extend_right', 'extend_down']` |
+|`how_to_paste_actions`| List of paste options that will be suggested on paste using some paste dialog e.g. `['extend_right', 'extend_down'] `. If there is only one option in list, then it will chosen automatically without dialog | `['replace_all', 'paste_over', 'extend_right', 'extend_down']` |
+|`replaceAllOnEmptyBackground`| Whether to select `replace_all` without dialog on first paste after painterro was just opened. So it will replaces background with image (will change dimensions to pasted image when background is empty) | `true` |
|`hideByEsc`| If `true` then `ESC` press will hide widget | `false` |
|`saveByEnter`| If `true` then `ENTER` press will do same as `Ctrl+S` | `false` |
|`extraFonts`| By default Text tool supports only several [predefined](https://github.com/devforth/painterro/blob/master/js/text.js#L38) fonts due to compatibility considirations , but yousing this option you can add any fonts you want if you are sure they are available on your page/app | `['Roboto']` |
|`toolbarHeightPx`| Height of toolbar in pixels | `40` |
|`buttonSizePx`| Button for toolbar in pixels | `32` |
+|`bucketSensivity`| Bucket tool sensivity | `100` |
+|`customTools`| List of the custom tools which will appear at the left menu after default options. Custom tool includes three options : | `{name:string, callBack:function, iconUrl:dataURL string or URL}` |
+|`disableWheelZoom`| Disables the mousewheel zoom with ctrl | `false` |
## Events
@@ -249,6 +257,7 @@ Painterro({
| `onChange` | Function that will be called if something will be changed (painted, erased, resized, etc) | `` | `undefined` |
| `onUndo` | Function that will be called if user will undo (`Ctrl+Z`) | `{}` |
| `onRedo` | Function that will be called if user will redo (`Ctrl+Z`) | `{}` |
+|`onImageFailedOpen`| Function that will be called if image can`t open | `undefined` |
| `onImageLoaded` | Function that will be called if you passed image to `show` and when it was loaded | `undefined` |
| `saveHandler` | Function that will be called when user presses Save (or `Ctrl+S`), Call `doneCallback` to reflect in painterro that image was saved | `{}`, `doneCallback : function` |
@@ -260,14 +269,15 @@ Events accepted arguments:
```
{
image: {
- asBlob: ƒ asBlob(type, quality)
- asDataURL: ƒ asDataURL(type, quality)
- suggestedFileName: ƒ suggestedFileName(type)
- getOriginalMimeType: ƒ getOriginalMimeType()
- getWidth: ƒ getWidth()
- getHeight: ƒ getHeight()
+ asBlob: ƒ asBlob(type, quality) // returns blob
+ asDataURL: ƒ asDataURL(type, quality) // returns e.g. "data:image/jpeg;base64,/9j/4AAQS...."
+ suggestedFileName: ƒ suggestedFileName(type) // returns string
+ hasAlphaChannel(): ƒ suggestedFileName() // returns true or false
+ getOriginalMimeType: ƒ getOriginalMimeType() // e.g. image/jpeg;
+ getWidth: ƒ getWidth() // integer
+ getHeight: ƒ getHeight() // integer
}
- operationsDone: int
+ operationsDone: int // integer
}
```
@@ -283,6 +293,9 @@ Events accepted arguments:
}
```
+
+
+
UI color scheme
---------------
@@ -330,8 +343,53 @@ API
**.hide()** - hide instance
+**.setColor(options)** - sets the color of the chosen tool , or changes initial value of color. `options` should be array with two values, `[target,colorWidgetState]`
+
+available values for `target`:
+
+|`line`|, |`bg`|
+
+`colorWidgetState` - object with requred properties :
+
+* `palleteColor` - color string . Just indicates which color will be shown on the collor pallete.
+* `alpha` - number in range from 0 to 1. The same but for alpha channel.
+* `alphaColor` - color string. Color with alpha, which will be using for drawing element.
+
+>NOTE: `paleteColor` and `alpha` is using only for displaing right values in color picker widget, this two options don't effect on color which will be used for drawing elements.
+
+**.setLineWidth()** - set line width for chosen tool.
+
+**.setArrowLength()** - set width for chosen arrow.
+
+**.setEraserWidth()** - set width of eraser
+
+**.setShadowOn()** - set shadowfor line elements or arrow element. It takes boolean value.
+
**.save()** - call save (same save as on buttons bar). Can be used if save button is hidden (`hiddenTools: ['save']`)
+**.doScale({ width, height, scale })** - scale the image and resize area.
+
+Scale to match the width and scale height proportinally (e.g. 50x32 will become 100->64):
+
+```
+.doScale({width: 100})
+```
+
+Scale to fill width and height (e.g. 50x32 will become 11->15):
+
+```
+.doScale({width: 11, height: 15})
+```
+
+Scale x2 (e.g. 11x12 will become 22->24):
+
+```
+.doScale({ scale: 2 })
+```
+
+**setZoom(zoomPercentage)** - sets the current zoom percentage
+
+
Example:
```js
@@ -339,11 +397,12 @@ var p = Painterro()
p.show()
```
-Translation
------------
+Translation 📙
+--------------
Want to translate Painterro into your language?
- If you need one of languages in table below, just pass pass `language` parameter, for example:
+
+If you need one of languages in table below, just pass pass `language` parameter, for example:
```js
Painterro({
@@ -356,17 +415,29 @@ Translated languages:
|-|-|
| `ca` | Catalan |
| `de` | German |
+| `en` | English |
+| `es` | Spanish |
| `fa` | Iran-Farsi (Persian (Ir-Fa) |
| `fr` | French |
| `ja` | Japanese |
-| `en` | English |
-| `es` | Spanish |
| `pl` | Polish |
| `pt-PT` | European Portuguese |
| `pt-BR` | Brazilian Portuguese |
+| `ru` | Russian |
+| `nl` | Dutch |
+
+
- If you want to add another language, then fork. Create file in folder langs for your translation and copy [langs/en.lang.js] in it. Then translate all `'Strings'` and add reference in [js/translation.js]. After that create pull-request, or just open [issue](https://github.com/devforth/painterro/issues)
- if you don't know how to create a PR.
+If you want to add another language, then:
+
+1. fork to your GitHub with button on top.
+2. Create empty file in folder langs [.lang.js] for your translation. `LANG_ISO_CODE` should follow [ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes)
+3. Copy content from [langs/en.lang.js] to a new file
+4. Then translate all `'Strings'`
+5. Add reference in [js/translation.js] inside of your repo.
+5. After that create pull-request, or just open [issue](https://github.com/devforth/painterro/issues) if you don't know how to create a PR.
+
+🤔 Found a bug in some word for your language? Feel free to edit on GitHub directly and suggest a fix.
If you want to translate or change strings without contributing you can do this by passing
`translation` parameter, for example:
@@ -382,15 +453,14 @@ Painterro({
}
}).show()
```
-For all strings that can be translated, see [langs/en.lang.js]
+For all strings that should be translated, see [langs/en.lang.js]
-Saving image
-============
-
-You should provide your save handler, which will post/update image on server or will pass image to another
-frontend components.
+Saving image 💾
+===============
+You should provide your own save handler, that will post/update image on server or will pass image to other
+frontend components. In this section we will provide several backend examples on python Flask (easiest web server for python). Anyway if you will face any python exception you can use super-helpfull [fixexception.com](https://fixexception.com/) service to fix any issue you will face 💪.
Binary saving
-------------
@@ -408,7 +478,8 @@ var ptro = Painterro({
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://127.0.0.1:5000/save-as-binary/', true);
xhr.onload = xhr.onerror = function () {
- done(true);
+ // after saving is done, call done callback
+ done(true); //done(true) will hide painterro, done(false) will leave opened
};
xhr.send(formData);
}
@@ -477,7 +548,8 @@ You can just insert image as data url to any WYSIWYG editor, e.g. TinyMCE:
var ptro = Painterro({
saveHandler: function (image, done) {
tinymce.activeEditor.execCommand('mceInsertContent', false, '');
- done(true)
+ // after saving is done, call done callback
+ done(true); //done(true) will hide painterro, done(false) will leave opened
}
})
```
@@ -493,6 +565,25 @@ Default type is mimetype used by image which was loaded into Painterro, or "imag
If type is `image/jpeg` or `image/webp`, you can also define image quality from `0.0` to `1.0`, default is `0.92`,
example: `image.asDataURL('image/jpeg', 0.5)`
+
+Save to jpeg or png depending on whether there is an alpha channel
+------------------
+
+An efficient way to save an image might be implmented by checking whether image has some alpha pixels:
+* If yes - we need to serve image in less efficient png format
+* Otherwise lets just use JPEG
+This is very simple with next:
+
+```
+var ptro = Painterro({
+ saveHandler: function (image, done) {
+
+ image.asBlob(image.hasAlphaChannel() ? 'image/png' : 'image/jpeg');
+ // upload blob
+ }
+})
+```
+
Example: Open Painterro by Ctrl+V
-----------------
@@ -523,10 +614,17 @@ document.onpaste = (event) => {
};
```
+If you face any painterro errors (exceptions), please reffer to [Painterro page on FixJSError](https://fixjserror.com/package/painterro/)
+Development 🔨
+==============
-Development
-===========
+Latest supported NodeJS version is 16, use nvm to switch to it:
+
+```
+nvm install 16
+nvm use 16
+```
Code written on ES6 which transplited by Babel and packed (minified) to a single file using webpack. All configs are inside so all you have to do after pulling repo is installing node modules:
@@ -558,21 +656,65 @@ To start hot-reload dev server (for reloading code "on the fly"):
```bash
npm run dev
```
-Then open http://localhost:8080 with demo page
+Then open http://localhost:3000 with demo page
+
+
+Editing source on the fly for painterro imported from side webpack app (e.g. your project SPA)
+------------------------------------------
+
+1. If your side app uses 'eslint' it, most likely side app will need eslint-plugin-import:
+
+```
+npm i eslint-plugin-import
+```
+
+2. Since compiled painterro commonjs2 file already linted and minimized you need to exclude it from linting:
+
+Add to package.json of your side app:
+```
+ "eslintIgnore": [
+ "/home/ivan/devforth/painterro/build/painterro2.commonjs.js"
+ ],
+```
+where `/home/ivan/devforth/painterro` is a folder with Painterro sources
+
+3. Replace
+
+```
+import Painterro from 'painterro';
+```
+with
+
+```
+import Painterro from '/home/ivan/devforth/painterro/build/painterro.commonjs2.js';
+```
+
+4. Go to painterro source folder and run:
+
+```
+watch npm run build
+```
Regenerating icons font
-----------------------
-If you need add/edit icons in `res` folder, please after editing run
+If you need add/edit icons in `res` folder, please after editing run:
```bash
npm run buildfont
```
-Contributing
+For font generation we use method described here: [How to generate a webfont (automated setup)](https://hinty.io/brucehardywald/how-to-generate-a-webfont-automated-setup/)
+
+
+
+Contributing
------------
+
Pull-requests are welcome.
+If you want to say thank us [Patreon is here](https://www.patreon.com/devforth)
+
[npm]: https://img.shields.io/npm/v/painterro.svg
[npm-url]: https://npmjs.com/package/painterro
diff --git a/Release.md b/Release.md
new file mode 100644
index 0000000..5c106a6
--- /dev/null
+++ b/Release.md
@@ -0,0 +1,10 @@
+
+
+npm login
+
+Tocken from github:
+
+GH_PASS=`cat ~/.ghtoken`
+
+Password from WP:
+WP_PASSWORD=`cat ~/.wppassword`
\ No newline at end of file
diff --git a/build/index.html b/build/index.html
index d5301f0..e301192 100644
--- a/build/index.html
+++ b/build/index.html
@@ -18,78 +18,72 @@
right: 20px;
}
+#holder {
+ display: flex;
+}
+
-
-
-**[Live Demo](https://hinty.io/login/?next=/add/%3Fpainterro)** | [npm](https://www.npmjs.com/package/painterro) | [GitHub](https://github.com/devforth/painterro)
+**[live demo](https://tracklify.com/painterro_demo/)** | [npm](https://www.npmjs.com/package/painterro) | [GitHub](https://github.com/devforth/painterro)
   
+[](http://tluma.ai/ask-ai/devforth/painterro)
JavaScript painting plugin which allows editing images in a browser.
-Can be easily integrated into any website or webapp by including only one JS file and calling simple initialization code.
+Can be easily integrated into any website or webapp by calling simple initialization code.
-Save to:
+🆕 Check out our simple and game-changing opensource [Vue admin framework](https://adminforth.dev/) with a great look and extensibility!
-[![alt text][1.1]][1] [![alt text][2.1]][2] [![alt text][3.1]][3] [![alt text][4.1]][4] [![alt text][5.1]][5]
-
+> 🙏🙏🙏 Scream for help to Ukraine
+>
+> 24 February 2022, Russia started bombing cities with peacefully civilized population in whole Ukraine. And has been doing it up to this day. Breaking all laws of war. Their bombs has been killing children and adults. This deserves Hague court.
+> - 🏠 If you are from Russia, please stop your government by any means including protests, don't trust local media, they are bribed by the government. They always was. I am sure you already feel lie by unexplainable crazy things in your country caused by world sanctions.
+> - 💣 Please spread the information about bombing of Ukraine in all social way you could. Russia treacherously broke into the territory of a sovereign state. Do not trust to anything from Russian media, most likely it will be bullshit
+> - 💼 If you have any kind of business cooperation with Russia, please block it now and keep most of money on your side, this is the only possible ethical decision
+> - ☢️ Ask your government to stop Russia from spreading invasion in any way. Russia is nuclear threat to the whole world. You think it is not possible? We thought that bombing of independent country with population of 44.13 million is also not possible.
-
-
-
-
-
-
-
-
-[1.1]: res/twitter.png (Save to Twitter)
-[2.1]: res/facebook.png (Save to Facebook)
-[3.1]: res/thumblr.png (Save to Thumblr)
-[4.1]: res/linkedin.png (Save to Linkedin)
-[5.1]: res/pinterest.png (Save to Pinterest)
-
-
-
-
-[1]: https://twitter.com/home?status=https://github.com/devforth/painterro
-[2]: https://www.facebook.com/sharer/sharer.php?u=https://github.com/devforth/painterro
-[3]: http://www.tumblr.com/share?v=3&u=https%3A%2F%2Fgithub.com%2Fdevforth%2Fpainterro&t=
-[4]: http://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fgithub.com%2Fdevforth%2Fpainterro&title=
-[5]: http://pinterest.com/pin/create/button/?url=https%3A%2F%2Fgithub.com%2Fdevforth%2Fpainterro&media=&description=
-
-
Features
-=================
+========
- Paste image from clipboard with `Ctrl+V` (e.g. `PtnScr` screenshot), drag and drop it into widget, or load with file select dialog
- Crop image by defined area
- Paint primitives: line, rectangle, ellipse (alpha color can be used)
+- Brush – free drawing tool e.g. to implement finger-based signatures on tablet screens
- Add text (you can use `Ctrl+B` - bold, `Ctrl+I` - italic, `Ctrl+U` - underlined, or just pase formatted HTML)
- Rotate / resize, scale image
- Pixelize some area to hide sensitive data
- Draw arrows
+- Trash can tool to clear the canvas
+- Paint bucket tool for color fills
+- Add filters to images
@@ -54,30 +40,47 @@ Features
Used by
=================
-
+ 
+ 
+