fix minor bugs

Author: CodeHole7

lib/canvasSettings.js

@@ -92,6 +92,18 @@
         let target = $(this).data('value');
         $(this).closest('.tab-container').find('.tab-content').hide();
         $(this).closest('.tab-container').find(`.tab-content[data-value=${target}]`).show();
+
+        if (target === 'color-fill') {
+          let color = $(`${_self.containerSelector} .toolpanel#background-panel .content #color-picker`).val();
+          try {
+            _self.canvas.backgroundColor = color;
+            _self.canvas.renderAll();
+          } catch (_) {
+            console.log("can't update background color")
+          }
+        } else {
+          updateGradientFill();
+        }
       })
 
       $(`${this.containerSelector} .toolpanel#background-panel .content .tab-label[data-value=color-fill]`).click();
@@ -104,7 +116,8 @@
         showInput: "true",
         allowEmpty: "false",
         move: function (color) {
-          let hex = color.toRgbString(); // #ff0000
+          let hex = 'transparent';
+          color && (hex = color.toRgbString()); // #ff0000
           _self.canvas.backgroundColor = hex;
           _self.canvas.renderAll();
         }

lib/core.js

@@ -28,6 +28,12 @@
         }
       }
 
+      if (id !== 'select') {
+        this.canvas.discardActiveObject();
+        this.canvas.renderAll();
+        this.activeSelection = null;
+      }
+
       this.canvas.isDrawingLineMode = false;
       this.canvas.isDrawingPathMode = false;
       this.canvas.isDrawingMode = false;

lib/selectionSettings.js

@@ -1,3 +1,6 @@
+/**
+ * initialize selection setting panel
+ */
 (function () {
   'use strict';
   const BorderStyleList = [{
@@ -251,7 +254,8 @@
         showInput: "true",
         allowEmpty: "false",
         move: function (color) {
-          let hex = color.toRgbString(); // #ff0000let color = $(this).val();
+          let hex = 'transparent';
+          color && (hex = color.toRgbString()); // #ff0000
           _self.canvas.getActiveObjects().forEach(obj => obj.set('stroke', hex))
           _self.canvas.renderAll(), _self.canvas.trigger('object:modified')
         }
@@ -328,6 +332,17 @@
         let target = $(this).data('value');
         $(this).closest('.tab-container').find('.tab-content').hide();
         $(this).closest('.tab-container').find(`.tab-content[data-value=${target}]`).show();
+        if (target === 'color-fill') {
+          let color = $(`${_self.containerSelector} .toolpanel#select-panel .fill-section #color-picker`).val();
+          try {
+            _self.canvas.getActiveObjects().forEach(obj => obj.set('fill', color))
+            _self.canvas.renderAll(), _self.canvas.trigger('object:modified')
+          } catch (_) {
+            console.log("can't update background color")
+          }
+        } else {
+          updateGradientFill();
+        }
       })
 
       $(`${_self.containerSelector} .toolpanel#select-panel .content .tab-label[data-value=color-fill]`).click();
@@ -340,7 +355,8 @@
         showInput: "true",
         allowEmpty: "false",
         move: function (color) {
-          let hex = color.toRgbString(); // #ff0000
+          let hex = 'transparent';
+          color && (hex = color.toRgbString()); // #ff0000
           _self.canvas.getActiveObjects().forEach(obj => obj.set('fill', hex))
           _self.canvas.renderAll(), _self.canvas.trigger('object:modified')
         }