Add live update to background color in inspetor

src/editor/interfaces/Interfaces.Canvas.Backdrop.js

@@ -45,7 +45,11 @@ var CanvasBackdrop = function (wickEditor, canvasContainer) {
         backdropDiv.style["-webkit-transform"] = transform;
         backdropDiv.style["transform"] = transform;
 
-        backdropDiv.style.backgroundColor = wickEditor.project.backgroundColor;
+        self.setColor(wickEditor.project.backgroundColor);
+    }
+
+    self.setColor = function (color) {
+        backdropDiv.style.backgroundColor = color;
     }
 
 }

src/editor/interfaces/Interfaces.ColorPicker.js

@@ -63,7 +63,9 @@ var ColorPickerInterface = function (wickEditor) {
             maxSelectionSize: 6,
             move: function (color) {
                 var colorString = color.toString();
-                if(previewType) {
+                if(previewType && previewType === 'background-color') {
+                    wickEditor.canvas.getBackdrop().setColor(colorString)
+                } else if (previewType) {
                     wickEditor.project.getSelectedObjects().forEach(function (o) {
                         if(!o.paper || o.isSymbol) return;
                         o.paper[previewType] = colorString;

src/editor/interfaces/Interfaces.Inspector.Properties.js

@@ -350,6 +350,7 @@ InspectorInterface.getProperties = function (wickEditor, inspector) {
     properties.push(new InspectorInterface.ColorPickerInput({
         title: '<img src="resources/inspector-icons/paint.svg" class="inspector-icon"/>',
         tooltip: 'Background Color',
+        previewType: 'background-color',
         isActiveFn: function () {
             return selectionInfo.type === 'project';
         },

src/editor/interfaces/Interfaces.Inspector.js

@@ -225,11 +225,11 @@ var InspectorInterface = function (wickEditor) {
         } else if(selectionInfo.numObjects > 1) {
 
             if(selectionInfo.type === 'wickobject') {
-                title = "Multiple Objects"
-                image = null;
+                title = "<p style='font-size:18px;'>Multiple Objects</p>"
+                image = './resources/inspector-icons/multipleobjects.svg';
             } else if (selectionInfo.type === 'frame') {
                 title = "Multiple Frames"
-                image = null;
+                image = "./resources/inspector-edit-timeline.svg"
             }
 
         } else if(selectionInfo.type === 'wickobject') {

src/player/WickPlayer.PixiRenderer.js

@@ -96,13 +96,15 @@ var WickPixiRenderer = function (canvasContainer) {
         }
         if(!renderExtraSpace) renderExtraSpace = 1;
 
-        graphics.clear();
-        graphics.beginFill(parseInt(project.backgroundColor.replace("#","0x")));
-        graphics.moveTo(0, 0);
-        graphics.lineTo(project.width, 0);
-        graphics.lineTo(project.width, project.height);
-        graphics.lineTo(0, project.height);
-        graphics.endFill();
+        if(renderExtraSpace === 1) {
+            graphics.clear();
+            graphics.beginFill(parseInt(project.backgroundColor.replace("#","0x")));
+            graphics.moveTo(0, 0);
+            graphics.lineTo(project.width, 0);
+            graphics.lineTo(project.width, project.height);
+            graphics.lineTo(0, project.height);
+            graphics.endFill();
+        }
 
         wickProject = project;