Documentation 3d handler

This commit is contained in:
Erik Tiekstra
2017-06-12 10:55:43 +02:00
parent 3c70292e6c
commit e6e0cd8b7e
2 changed files with 22 additions and 3 deletions
+21 -2
View File
@@ -2,19 +2,22 @@
var util = require('./util'); var util = require('./util');
/**
* Handles 3d image of canvas products.
* @param {canvas}
*/
function ThreeDHandler(canvas) { function ThreeDHandler(canvas) {
var _overlay = new fabric.Group(); var _overlay = new fabric.Group();
var _image; var _image;
function init() { function init() {
// Width is made bigger as this works better with resizing the editor
_overlay _overlay
.set({ .set({
visible: false, visible: false,
left: 0 left: 0
}) })
.addWithUpdate(new fabric.Rect({ .addWithUpdate(new fabric.Rect({
// Width is made bigger as this works better with resizing the editor
width: canvas.width * 2, width: canvas.width * 2,
height: canvas.height, height: canvas.height,
top: 0, top: 0,
@@ -28,6 +31,7 @@ function ThreeDHandler(canvas) {
init(); init();
/** /**
* Disables the 3d image by removing visibility
* @return {ThreeDHandler} * @return {ThreeDHandler}
*/ */
this.disable = function () { this.disable = function () {
@@ -36,6 +40,8 @@ function ThreeDHandler(canvas) {
}; };
/** /**
* Enables the 3d image by setting the width and visibility of the overlay and moving elements which
* needs to be visible to the front.
* @return {ThreeDHandler} * @return {ThreeDHandler}
*/ */
this.enable = function () { this.enable = function () {
@@ -50,10 +56,17 @@ function ThreeDHandler(canvas) {
return this; return this;
}; };
/**
* Checks if 3d mode is enabled/visible.
* @returns {boolean}
*/
this.isEnabled = function () { this.isEnabled = function () {
return _overlay.visible; return _overlay.visible;
}; };
/**
* Refreshes the image. This is mostly done upon resize of the window
*/
this.refreshImage = function() { this.refreshImage = function() {
if (util.isMobile()) { if (util.isMobile()) {
this.disable(); this.disable();
@@ -79,6 +92,10 @@ function ThreeDHandler(canvas) {
this.applyImage(); this.applyImage();
}; };
/**
* (Re)adds the new/existing image with new configuration to the overlay.
* @param {img}
*/
this.applyImage = function(img) { this.applyImage = function(img) {
img = img || _image; img = img || _image;
@@ -88,6 +105,8 @@ function ThreeDHandler(canvas) {
}; };
/** /**
* Sets the image and enables 3d mode.
* @param {img}
* @return {ThreeDHandler} * @return {ThreeDHandler}
*/ */
this.setImage = function (img) { this.setImage = function (img) {
+1 -1
View File
@@ -1,11 +1,11 @@
'use strict'; 'use strict';
/** /**
* This is just an example usage of the image editor. Also this is used for testing. * This is just an example usage of the image editor. Also this is used for testing.
* This code can be pretty messy, but that is fine because nothing of this will come to * This code can be pretty messy, but that is fine because nothing of this will come to
* production. * production.
*/ */
(function() { (function() {
var $document = $(document); var $document = $(document);
var $window = $(window); var $window = $(window);