Chore: release of a new version 3.12.2🚀

CHANGELOG.md

@@ -26,6 +26,14 @@ Types of changes:
 
 -------------
 
+## 3.12.2 - 2020-10-22
+### Fixed
+- Showing shapes borders in light color scheme.
+
+### Added
+- Watermark fonts for using those fonts in text watermark fonts field.
+- Theme fonts for supporting those fonts in text & text watermark fonts field (if no fonts provided for watermark object).
+
 ## 3.12.1 - 2020-10-09
 ### Fixed
 - Removing hot loader build paths from the complied library files.

README.md

@@ -1,6 +1,6 @@
 > Repository includes React version and Vanilla JS adapter for standalone usage
 
-[![Release](https://img.shields.io/badge/release-v3.12.1-blue.svg)](https://github.com/scaleflex/filerobot-image-editor/releases)
+[![Release](https://img.shields.io/badge/release-v3.12.2-blue.svg)](https://github.com/scaleflex/filerobot-image-editor/releases)
 [![Contributions welcome](https://img.shields.io/badge/contributions-welcome-orange.svg)](#contributing)
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 [![Scaleflex team](https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-the%20Scaleflex%20team-6986fa.svg)](https://www.scaleflex.it/en/home)
@@ -140,7 +140,7 @@ or use your custom color scheme
 Use the latest CDNized plugin version:
 
 ```html
-<script src="https://cdn.scaleflex.it/plugins/filerobot-image-editor/3.12.1/filerobot-image-editor.min.js"></script>
+<script src="https://cdn.scaleflex.it/plugins/filerobot-image-editor/3.12.2/filerobot-image-editor.min.js"></script>
 ```
 
 ### <a name="quick_start"></a>Quick start
@@ -355,6 +355,9 @@ Add watermark on the image after applying image transformations.
 
 ##### `watermark.defaultText`: string - the default text that would be added as a text watermark
 
+##### `watermark.fonts`: array - the fonts that would be shown & used in text watermark
+example: [{ label: 'Arial', value: 'Arial' }]
+
 
 ```
 config.watermark = {
@@ -392,7 +395,15 @@ config.theme = {
 
     border: '#161e23',
     borderLight: '#70777f'
-  }
+  },
+  fonts: [
+    { label: 'Arial', value: 'Arial' },
+    { label: 'Tahoma', value: 'Tahoma' },
+    { label: 'Times New Roman', value: 'Times New Roman'},
+    { label: 'Courier', value: 'Courier' },
+    { label: 'Courier New', value: 'Courier New' },
+    { label: 'Verdana', value: 'Verdana' }
+  ]
 };
 ```
 

examples/js/src/filerobot-init-example.js

@@ -47,6 +47,16 @@ ImageEditorDownload = new FilerobotImageEditor({
       fileUpload: true,
       defaultText: 'Filerobot.....'
     },
+    theme: {
+      fonts: [
+        { label: 'Arial', value: 'Arial' },
+        { label: 'Tahoma', value: 'Tahoma' },
+        { label: 'Times New Roman', value: 'Times New Roman'},
+        { label: 'Courier', value: 'Courier' },
+        { label: 'Courier New', value: 'Courier New' },
+        { label: 'Verdana', value: 'Verdana' }
+      ]
+    },
     showGoBackBtn: false,
     showInModal: true,
     noCapitalStrs: false, // default: false

examples/js/src/index.html

@@ -297,7 +297,7 @@ <h2>Ready to get started?</h2>
           Include the following script into your project
         </p>
         <figure class="highlight">
-          <pre><code class="javascript">&lt;script src="https://cdn.scaleflex.it/plugins/filerobot-image-editor/3.12.1/filerobot-image-editor.min.js"/&gt;&lt;/script&gt;</code></pre>
+          <pre><code class="javascript">&lt;script src="https://cdn.scaleflex.it/plugins/filerobot-image-editor/3.12.2/filerobot-image-editor.min.js"/&gt;&lt;/script&gt;</code></pre>
         </figure>
       </div>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "filerobot-image-editor",
-  "version": "3.12.1",
+  "version": "3.12.2",
   "main": "dist/index.js",
   "description": "Edit, resize, and filter any image!",
   "author": "scaleflex",

projects/react/ImageEditorWrapper.js

@@ -3,7 +3,7 @@ import ImageEditor from './ImageEditor';
 import { Container } from './styledComponents';
 import { ThemeProvider } from 'styled-components';
 import { Modal } from './components/Modal';
-import { CLOUDIMAGE_OPERATIONS, TOOLS, UPLOADER, ON_CLOSE_STATUSES } from './config';
+import { CLOUDIMAGE_OPERATIONS, TOOLS, UPLOADER, ON_CLOSE_STATUSES, STANDARD_FONTS } from './config';
 import './assets/fonts/filerobot-font.css';
 import translations from './assets/i18n';
 import dark from './assets/theme/dark';
@@ -21,7 +21,7 @@ class ImageEditorWrapper extends Component {
     config.language = (config.translations[config.language] || translations[config.language]) ? config.language : 'en';
     config.theme = config.theme || {};
     config.theme.colors = config.theme.colors || {};
-    config.theme.fonts = config.theme.fonts || {};
+    config.theme.fonts = config.theme.fonts || STANDARD_FONTS;
     config.colorScheme = config.colorScheme || 'dark';
     config.platform = config.platform || 'filerobot';
 
@@ -39,10 +39,7 @@ class ImageEditorWrapper extends Component {
           ...(config.colorScheme === 'light' ? light : dark).colors,
           ...config.theme.colors
         },
-        fonts: {
-          ...(config.colorScheme === 'light' ? light : dark).fonts,
-          ...config.theme.fonts
-        }
+        fonts: config.theme.fonts
       }
     }
   }

projects/react/assets/theme/dark.js

@@ -14,8 +14,5 @@ export default {
     border: '#161e23',
     borderLight: '#70777f',
     disabledBg: 'rgba(255, 0, 0, 0.1)',
-  },
-  fonts: {
-
   }
 };

projects/react/assets/theme/light.js

@@ -14,8 +14,5 @@ export default {
     border: '#aeaeae',
     borderLight: '#e1e1e1',
     disabledBg: 'rgba(255, 0, 0, 0.1)',
-  },
-  fonts: {
-
   }
 };

projects/react/components/CustomizedCanvas.js

@@ -35,30 +35,28 @@ export default class CustomizedCanvas extends Component {
       this._canvas.addEventListener('mousedown', this.onSelect);
       this._context = this._canvas.getContext('2d');
 
+      const border = `1px solid ${this.props.colorScheme === 'light' ? '#000' : '#fff'}`;
       const availableShapes = [
         {
           label: 'Rectangle',
           variant: SHAPES_VARIANTS.RECT,
-          iconStyles: { height: 50, width: 100, border: '1px solid #fff' },
+          iconStyles: { height: 50, width: 100, border },
           drawFn: this.addRect,
         },
         {
           label: 'Square',
           variant: SHAPES_VARIANTS.SQUARE,
-          iconStyles: { border: '1px solid #fff' },
+          iconStyles: { border },
           drawFn: (props) => this.addSquare({ width: 75, height: 75, ...props }),
           // iconUrl: undefined,
         },
         {
           label: 'Circle',
           variant: SHAPES_VARIANTS.CIRCLE,
-          iconStyles: { border: '1px solid #fff', borderRadius: '50%' },
+          iconStyles: { border, borderRadius: '50%' },
           drawFn: this.addCircle
           // iconUrl: undefined,
         },
-        // TODO: Giving the consumer the chance to add more shapes with its draw fns. from props.
-        // TODO: Supporting the shapes for expanding & Add expandShapes to readme.
-        ...this.props.expandShapes
       ]
 
       this.props.updateState({

projects/react/components/Preview/Preview.js

@@ -9,7 +9,7 @@ export default class extends Component {
   render() {
     const {
       activeTab, isHideCanvas, watermark = {}, focusPoint, original, updateState, src, shapes,
-      selectedShape, config: { expandShapes = [] }, roundCrop, canvasDimensions
+      selectedShape, config: { colorScheme }, roundCrop, canvasDimensions
     } = this.props;
 
     const { applyByDefault } = watermark;
@@ -30,10 +30,10 @@ export default class extends Component {
           shapes={shapes}
           updateState={updateState}
           selectedShape={selectedShape}
-          expandShapes={expandShapes}
           activeTab={activeTab}
           round={roundCrop}
           originalCanvasDimensions={canvasDimensions}
+          colorScheme={colorScheme}
         />}
 
         {activeTab === 'focus_point' && (

projects/react/components/Toolbar/Text.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import { AddWrapper, SettingsWrapper, FieldGroup, FieldCustomLabel } from '../../styledComponents/Shapes.ui';
-import { STANDARD_FONTS } from '../../config';
 import { FieldInput } from '../../styledComponents';
 import Range from '../Range';
 import Select from '../Shared/Select';
@@ -22,7 +21,7 @@ export default class Text extends Component {
   updatePropertyFromEvent = (e) => this.props.shapeOperations.updateShape({ [e.target.name]: e.target.value });
 
   render() {
-    const { t, selectedShape = {} } = this.props;
+    const { t, selectedShape = {}, config: { theme } } = this.props;
     const {
       text = '',
       textFont = 'Arial',
@@ -48,7 +47,7 @@ export default class Text extends Component {
           <FieldGroup>
             <FieldCustomLabel>Font family</FieldCustomLabel>
             <Select
-                list={STANDARD_FONTS}
+                list={theme.fonts}
                 valueProp="value"
                 id="textFont"
                 value={textFont}

projects/react/components/Toolbar/Watermark.js

@@ -16,7 +16,13 @@ import {
 import { debounce } from 'throttle-debounce';
 import Range from '../Range';
 import Select from '../Shared/Select';
-import { WATERMARK_POSITIONS, WATERMARK_POSITIONS_PRESET, STANDARD_FONTS, WATERMARK_CLOUDIMAGE_FONTS, WATERMARK_UNIQUE_KEY, SHAPES_VARIANTS } from '../../config';
+import {
+  WATERMARK_POSITIONS,
+  WATERMARK_POSITIONS_PRESET,
+  WATERMARK_CLOUDIMAGE_FONTS,
+  WATERMARK_UNIQUE_KEY,
+  SHAPES_VARIANTS
+} from '../../config';
 import { getWatermarkPosition, getCanvasNode } from '../../utils';
 
 
@@ -81,7 +87,7 @@ export default class extends Component {
       color: '#000000',
       textSize: 62,
       textFont: 'Arial',
-      fonts: fonts || STANDARD_FONTS,
+      fonts: fonts || this.props.config.theme.fonts,
     }
   }