Fix

• update the range component to not trigger changes immediately after typing (PR #646)
• improve applyFilter parameter type (PR #687)
• respect preset ratio on new cropzone (PR #700)

Env

• update tui-code-snippet (PR #688)

Fix

• tui-code-snippet is included in the tui-code-snippet package. (#664)
  • tui-code-snippet is not included in the tui-image-editor package, so errors occur during compilation.

Fix

• fix 'px' labels on the resize feature while using menuBarPosition: "left|right" (PR #644)

Env

• update babel, webpack and their options
  • Fabric has been included in the bundle. Now, when using the tui-image-editor, there is no need to load fabric separately.

Feat

• add resize feature. Thanks to @seytar (PR #575)
  • 

Fix

• add a prefix to Text align button block active classname (fix #589)(PR #590)

Fix

• removes the object when editing hex inputs of the color picker. (fix #504)
• not uncheck filter's checkbox when reset image (fix #552)

Fix

• unable to press space key in the text box outside the image-editor. [fix #556] (PR #563)
• not work space key when vue image-editor component loaded. [fix #560] (PR #564)

Fix

• Text control exits when space key pressed. [fix #555] (PR #558)

Feat

• add zoom feature (PR #553)
  • zoom-in feature
    • 
    • Drag or click to zoom-in!
  • zoom-out feature
    • 
    • Click zoom-out to return to the previous zoom level!
  • hand feature
    • 
    • Use the hand tool to move the canvas!
      • Or use space bar to turn on/off hand

Feat

• add history feature (PR #544)
  • 

Fix

• error when undo after text added [#521] (PR #545)
• group selection object position when undo, redo in API direct page [#522] (PR #546)
• fire object modified event when cropzone changed [#519] (PR #547)
• resize cropzone with ratio by pressing shift key (PR #548)

Feat

• apply mono-repo (PR #524)

Fix

• not work filter in direct api example [#388] (PR #525)
• classname error when clicking in the gap [#411] (PR #526)
• not occur text changed event [#387, #419] (PR #527)
• disappear image when apply crop [#359] (PR #528)

feat

• add undo stack of object resize/move (#358)
• update fabric.js version to 4.2.0 (#461)
• add icon drawing mode (#74, #441)

Enhancement

• apply prettier (PR #493)

bug-fix

• not apply text line-through decoration (#453)
• not apply setBrush API when LINE_DRAWING (#409, #418)

bug-fix

• fix: blur filter not work (#445)
• fix: undo command of icon color change not work (#448)

Added

• Add filter type with shape fill option

imageEditor.setDrawingShape('rect', {
   fill: {
       type: 'filter',
       filter: [{blur: 0.3}, {pixelate: 20}]
   },
   width: 100,
   height: 200
});

imageEditor.addShape('rect', {
   fill: {
       type: 'filter',
       filter: [{blur: 0.3}, {pixelate: 20}]
   },
   width: 100,
   height: 200,
   left: 100,
   top: 100,
   stroke: 'blue',
   strokeWidth: 3
});

• Added an option to draw an arrow shape with the line drawing option.

imageEditor.startDrawingMode('LINE_DRAWING', {
    width: 10,
    color: 'rgba(255,0,0,0.5)',
    arrowType: {
        tail: 'chevron' // triangle
    }
});

• Added autofocus option for addText api.

bug-fix

• Fixed minor bugs in text objects (fix #262 #109).

Enhancement

• Added object rotation event listener for user reference (#322)
• Added copy and paste function (fixed #63) (#355)
• Improved svg to show built-in svg, no need to set file path. (#347)

Bug fixop

• Fixed bug where UI code was not handled well when running destroy api. (fixed #334) (#332)
• Missing tooltips for redo, undo, reset, delete, and delete-all (fixed #266) (#330)
• Rotation breaks image aspect ratio (fixed #340) (#355)
• Fixed cropzone distortion. (fixed #101) (#349)

Enhancement

• In the UI included option, it has been improved to change the input text value of the slider UI to change the value more accurately (#183)
• Improved behavior so that 'undoStack' is not reflected while dragging from silder UI with UI included option (#310)
• Added isSilent (not included in undoStack) parameter for changeShape, changeTextStyle, applyFilter api (#310)
• After setting the Cropzone area by specifying a ratio, the ratio is maintained and resized when resizing (#124)

Bug fix

• Fixed incorrect reporting of 'objectMoved` event listener when moving cropzone (fixed #269)
• Fixed a bug in the undo run for each image editor menu (fixed #315).
  • Fixed a bug where undoing the correct previous value would not work when undoing commands executed with the isSilent parameter of rotate and setAngle api. (fixed #307)

bug-fix

• Fixed npm installation not installing properly on node.js stable version. (fixed #298)
• Fixed bug where the shape would not show while dragging to draw a 'shape' in certain areas. (fixed #297)
• Fixed the problem that the text underline function does not work (fixed #221)
• Fixed bug where saving crop guides with images if saving before cropping was applied. (fixed #237)
• Fixed a bug where getCropzone api returned null in images of certain resolutions. (fixed #114)
• Fixed a bug where the behavior was changed to move during crop region resize. (fixed #118)

bug-fix

• Fixed bug where the checkbox menu of the filter was not displayed when "white theme" was applied.
• Fixed a style issue where the "menuBar" would cover the entire editing area when the "menuBarPosition" position was set to "top".

bug-fix

• Fixed incorrect behavior of filter checkbox when creating more than one instance. (fix #274)
• Fixes a problem where curve positions move to the wrong place after drawing a free drawing line. (fix #228)

Enhancement

• Update fabric.js to v3.3.2(PR #234)

bug-fix

• Resolve fabric is undefined issue in test (PR #234)

fix: Correct tui-image-editor exporting type in index.d.ts.

Bug fix

• #127 - fix: Initialize UI defaultIcons without initial selected menu option. (fix #115)
• #128 - fix: Ensure reject on loadImage failed (fix #116)
• #139 - fix: Modify title of filter subMenu name "Grayscale" (fix #138)
• #145 - fix: Change loadButton tag to div (fix #137)
• #146 - fix: Add shape on mouseClick without mouseMove (fix #144)
• #148 - fix: Change 'tui-image-editor' export type to default export (fix #142)
• #149 - fix: Do not fire "changeShow" event when ColorPicker's color not changed (fix #131)

Added

• Added declaration file(./index.d.ts) for Typescript support.
• Added Localization feature includeUi.locale
  • Detail manual

var locale_ru_RU = { // override default English locale to your custom
    'Crop': 'Обзрезать', // as result default English inscription will be translated into Russian
    'Delete-all': 'Удалить всё'
    // etc...
};
// Image editor
var instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
     includeUI: {
         ...
         locale: locale_ru_RU, // key-value object with localization
         ...
     },
     ...
});

New

• Adds crop selection presets (square, 3:2, 4:3, 5:4, 7:5, 16:9)

Fixed

• Fixed cropzone remaining after image cropping was canceled.

Fixed

• Fixed a bug where the image load button function does not work properly when the default image is not registered.

Changed

• Improved ga hostname collection method. (From tui-code-snippet version v1.4.0)

Changed

• Improved the design details of the includeUI.
  • Changed the fine spacing and color of icons, checkboxes, and text in menu and submenu.

Fix

• Fixed JavaScript error after adding custom icon.
• Fixed a bug where the backspace key does not work when editing text elements.

New

• Added includeUI option
  • includeUI option - The default UI provided by the image editor is now available.
    • includeUI.loadImage - Can specify a default target image.
    • includeUI.menu - Of the nine editing functions, only the desired functions can be included in the UI.
    • includeUI.initMenu - Can specify the menu to be used when starting up.
    • includeUI.menuBarPosition - Can set the menu bar position of the UI.
    • includeUI.theme - Can apply or customize the default theme included in the example.

var blackTheme = require('./js/theme/black-theme.js');
var instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
     includeUI: {
         loadImage: {
             path: 'img/sampleImage.jpg',
             name: 'SampleImage'
         },
         theme: blackTheme, // or whiteTheme
         menu: ['crop', 'flip', 'rotate', 'draw', 'shape', 'icon', 'text', 'mask', 'filter'],
         initMenu: 'filter',
         menuBarPosition: 'bottom'
     },
     ...
});

• Added Theme
  • Provides white and black theme with basic design.
  • Themes can be created and modified for customization.

| properties | description | | --- | --- | | 'common.bi.image' | Brand icon image | | 'common.bisize.width' | Icon image width | | 'common.bisize.height' | Icon Image Height | | 'common.backgroundImage' | Background image | | 'common.backgroundColor' | Background color | | 'common.border' | Full area border style | | 'header.backgroundImage' | header area background | | 'header.backgroundColor' | header area background color | | 'header.border' | header area border style | | 'loadButton.backgroundColor' | load button background color | | 'loadButton.border' | load button border style | | 'loadButton.color' | load button foreground color | | 'loadButton.fontFamily' | load button font type | | 'loadButton.fontSize' | load button font size | | 'downloadButton.backgroundColor' | download button background color | | 'downloadButton.border' | download button border style | | 'downloadButton.color' | download button foreground color | | 'downloadButton.fontFamily' | download button font type | | 'downloadButton.fontSize' | download button font size | | 'menu.normalIcon.path' | Menu default icon svg bundle file path | | 'menu.normalIcon.name' | Menu default icon svg bundle name | | 'menu.activeIcon.path' | Menu active icon svg bundle file path | | 'menu.activeIcon.name' | Menu active icon svg bundle name | | 'menu.iconSize.width' | Menu icon Size Width | | 'menu.iconSize.height' | Menu Icon Size Height | | 'submenu.backgroundColor' | Sub-menu area background color | | 'submenu.partition.color' | Submenu partition line color | | 'submenu.normalIcon.path' | Submenu default icon svg bundle file path | | 'submenu.normalIcon.name' | Submenu default icon svg bundle name | | 'submenu.activeIcon.path' | Submenu active icon svg bundle file path | | 'submenu.activeIcon.name' | Submenu active icon svg bundle name | | 'submenu.iconSize.width' | Submenu icon Size Width | | 'submenu.iconSize.height' | Submenu Icon Size Height | | 'submenu.normalLabel.color' | Submenu default label color | | 'submenu.normalLabel.fontWeight' | Sub Menu Default Label Font Thickness | | 'submenu.activeLabel.color' | Submenu active label color | | 'submenu.activeLabel.fontWeight' | Submenu active label Font thickness | | 'checkbox.border' | Checkbox border style | | 'checkbox.backgroundColor' | Checkbox background color | | 'range.pointer.color' | range control pointer color | | 'range.bar.color' | range control bar color | | 'range.subbar.color' | range control subbar color | | 'range.value.color' | range number box font color | | 'range.value.fontWeight' | range number box font thickness | | 'range.value.fontSize' | range number box font size | | 'range.value.border' | range number box border style | | 'range.value.backgroundColor' | range number box background color | | 'range.title.color' | range title font color | | 'range.title.fontWeight' | range title font weight | | 'colorpicker.button.border' | colorpicker button border style | | 'colorpicker.title.color' | colorpicker button title font color |

Features

• 07f826b Feature: send hostname

Documentation

• 3ceb81e Docs: change file link and edit title of examples
• 6f1c685 Docs: update year of license
• 7f8ce91 Docs: update link of example on README file
• 2c37314 Docs: add install via CDN guide

Fix

• #22 update coords after changing properties with setObjectPosition, setObjectProperties.

Fix

• Use fabric.require.js module instead fabric.js Supports UMD