Prepare frame rendering in Viewport

index.php

@@ -17,6 +17,14 @@
                 <input type="text" name="h" value="100" />
                 Mirror: <input type="checkbox" class="image-control" name="mirror" />
                 No crop: <input type="checkbox" class="image-control" name="no-crop" />
+                Canvas Frame:
+                <select class="image-control" name="canvas-border">
+                    <option value="noop">Choose</option>
+                    <option value="none">None</option>
+                    <option value="white">White</option>
+                    <option value="black">Black</option>
+                    <option value="image">Image</option>
+                </select>
             </div>
         </form>
         <br /><br />

src/js/components/ImageEditor/Viewport.js

@@ -129,6 +129,80 @@ function Viewport(canvas) {
         canvas.getButtonMenu().bringToFront();
     };
 
+    var _frames = [];
+
+    function getFrame(borderType) {
+        _frames.forEach(function (o) {
+            canvas.remove(o);
+        });
+        _frames = [];
+
+        var frames = {
+            top: new fabric.Rect({
+                fill: 'transparent',
+                width: _data.width - (_data.ppmm * 29) * 2,
+                height: _data.ppmm * 29,
+                stroke: '#000',
+                strokeWidth: 1
+            }),
+            right: new fabric.Rect({
+                fill: 'transparent',
+                width: _data.ppmm * 29,
+                height: _data.height - (_data.ppmm * 29) * 2,
+                stroke: '#000',
+                strokeWidth: 1
+            })
+        };
+
+        frames.bottom = frames.top.clone();
+        frames.left = frames.right.clone();
+    }
+
+    /**
+     * @param  {string} frameType white|black|image|none
+     * @return {Viewport}
+     */
+    this.setFrame = function (frameType) {
+        /*
+        _rect = new fabric.Rect({
+            evented: false,
+            fill: 'transparent',
+            width: _data.width,
+            height: _data.height,
+            stroke: '#fff',
+            strokeWidth: canvas.__type === 'canvas' ? 0 : _borderWidth
+        });
+         */
+console.log(_data.image)
+        var frames = {
+            top: new fabric.Rect({
+                fill: 'transparent',
+                width: _data.width - (_data.ppmm * 29) * 2,
+                height: _data.ppmm * 29,
+                stroke: '#000',
+                strokeWidth: 1,
+                top: _data.image.top - 1
+            }),
+            right: new fabric.Rect({
+                fill: 'transparent',
+                width: _data.ppmm * 29,
+                height: _data.height - (_data.ppmm * 29) * 2,
+                stroke: '#000',
+                strokeWidth: 1
+            })
+        };
+
+        frames.bottom = frames.top.clone().set({
+            top: (_data.image.top + _data.image.height) - frames.top.height
+        });
+
+        frames.left = frames.right.clone();
+
+        frames.top.addTo(canvas).centerH();
+        frames.bottom.addTo(canvas).centerH();
+        canvas.renderAll()
+    }
+
     this.getData = function () {
         return _data;
     };

src/js/init.js

@@ -7,7 +7,8 @@
         h: $('#form-control input[name="h"]'),
         image_id: $('#form-control input[name="image_id"]'),
         mirror: $('#form-control input[name="mirror"]'),
-        noCrop: $('#form-control input[name="no-crop"]')
+        noCrop: $('#form-control input[name="no-crop"]'),
+        border: $('#form-control select[name="canvas-border"]'),
     };
 
     var imageUrl = '//images.photowall.com/products/' + $input.image_id.val() + '.jpg?h=450';
@@ -58,10 +59,14 @@
         NoCrop: function() {
             $input.w.trigger('input');
         },
+        SetBorder: function () {
+            editor.canvas.getViewport().setFrame($(this).val());
+        }
     };
 
     $input.w.on('input', Event.DimensionChange);
     $input.h.on('input', Event.DimensionChange);
     $input.mirror.on('change', Event.Mirror);
     $input.noCrop.on('change', Event.NoCrop);
+    $input.border.on('change', Event.SetBorder);
 }());