'use strict';
/**
* Frontend js file to generate an cube of svg's
*/
(function (exports) {
exports.SvgCube = function (svgPanel, options) {
// Inputs and options
var defaultOptions = {
rotateX: 30, // isometric angle
rotateY: 45,
rotateZ: 0,
perspective: 0, // doesn't do anything usefull
scaleX: 1.00,
scaleY: 1.00, // flatten
scaleZ: 1.00, // push face
size: 400,
verbose: false,
// outline
drawOutline: false,
drawShading: false,
borderRadius: 0,
stroke: {
"stroke": 'black', // stroke color for outline
"stroke-width": 0, // outline width
},
// cube
topRot: 0, // rotation of top image in degrees
topShad: 0, // shading for top
leftRot: 0,
leftShad: 0.0,
rightRot: 0,
rightShad: 0.0,
backRot: 0,
backShad: 0.0,
bottomRot: 0,
bottomShad: 0.0,
frontRot: 0,
frontShad: 0.0,
};
// add defaults, 2 levels deep
options = options || {};
for (var opt in defaultOptions) {
if (defaultOptions.hasOwnProperty(opt) && !options.hasOwnProperty(opt)) {
options[opt] = defaultOptions[opt];
}
for (var opt2 in defaultOptions[opt]) {
if (defaultOptions[opt].hasOwnProperty(opt2) && !options[opt].hasOwnProperty(opt2)) {
options[opt][opt2] = defaultOptions[opt][opt2];
}
}
}
options.svgPanel = svgPanel;
this.options = options;
console.log(svgPanel);
// legacy compat
if (options.flatten !== undefined) {
options.scaleY = 1 - options.flatten;
}
if (options.angle !== undefined) {
options.rotateX = options.angle;
}
if (!options.drawOutline) {
options.stroke['stroke-width'] = 0;
}
this.init();
};
exports.SvgCube.prototype.init = function () {
this.rotateX = this.options.rotateX;
this.w = this.options.size; // input image width
this.h = this.options.size;
this.f = 1 - this.options.scaleY;
this.rot = this.rotateX * Math.PI / 180;
this.padding = this.options.padding || 0; // pading fraction
this.cw = this.w; // we will keep same width but change height
this.ch = this.h * 5; //(this.h + Math.sqrt(2)*this.h * Math.tan(this.rot)) - this.h / 2 * (this.f); //canvas height full
// create SVG element
var o = this.options;
/** Write sides if they have not already been written **/
if ($('body>.cube').length === 0) {
var cube = $('');
var imageFront = $('' +
'' +
'' +
'');
cube.append(imageFront);
var imageL = $('' +
'' +
'' +
'');
cube.append(imageL);
var imageRight = $('' +
'' +
' ' +
'');
cube.append(imageRight);
var imageTop = $('' +
'' +
'' +
'');
cube.append(imageTop);
var imageBack = $('' +
'' +
'' +
'');
cube.append(imageBack);
var imageBottom = $('' +
'' +
'' +
'');
cube.append(imageBottom);
$('body').append(cube);
}
// Now we generate some css to put everything in good positions
var transitions = 0.1;
var styleStr = '' +
'';
$('head>#projection').remove();
$('head').append($(styleStr));
};
/**
* Get the bounds of the images for a screenshot
* uses $.position to get min,max of each side of the image
* @return {object} object.dimension.[min|max] e.g. object.left.min
*/
exports.SvgCube.prototype.getBounds = function () {
var bounds = {};
$('.cube>b').each(function () {
var pos = this.getBoundingClientRect();
for (var dim in pos) {
if (dim in pos) {
// init
if (bounds[dim] === undefined) {
bounds[dim] = {
'max': pos[dim],
'min': pos[dim]
};
} else {
// get max and min
bounds[dim].max = Math.max(bounds[dim].max, pos[dim]);
bounds[dim].min = Math.min(bounds[dim].min, pos[dim]);
}
}
}
});
return bounds;
};
exports.SvgCube.prototype.update = function () {
this.init();
console.log(this.getBounds());
};
})(typeof exports === 'undefined' ? this['SvgCube'] = {} : exports);