diff --git a/projectSVG.js b/projectSVG.js index 67af214..651cdd6 100755 --- a/projectSVG.js +++ b/projectSVG.js @@ -2,36 +2,6 @@ /** * Frontend js file to generate an cube of svg's */ -// http://cssdeck.com/labs/pure-css-animated-isometric-boxes - - - -// polyfill for bind https://github.com/ariya/phantomjs/issues/11281 -if (!Function.prototype.bind) { - console.log("Using polyfill of Function.prototype.bind"); - Function.prototype.bind = function (oThis) { - if (typeof this !== "function") { - // closest thing possible to the ECMAScript 5 - // internal IsCallable function - throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable"); - } - - var aArgs = Array.prototype.slice.call(arguments, 1), - fToBind = this, - fNOP = function () {}, - fBound = function () { - return fToBind.apply(this instanceof fNOP && oThis - ? this - : oThis, - aArgs.concat(Array.prototype.slice.call(arguments))); - }; - - fNOP.prototype = this.prototype; - fBound.prototype = new fNOP(); - - return fBound; - }; -} var SvgCube = function (options) { @@ -56,22 +26,17 @@ var SvgCube = function (options) { "stroke-width": 0, // outline width }, // cube - topUrl: '', // url for image in top of cuve + svgPanel: '', // url for image in top of cuve topRot: 0, // rotation of top image in degrees topShad: 0, // shading for top - leftUrl: '', leftRot: 0, leftShad: 0.0, - rightUrl: '', rightRot: 0, rightShad: 0.0, - backUrl: '', backRot: 0, backShad: 0.0, - bottomUrl: '', bottomRot: 0, bottomShad: 0.0, - frontUrl: '', frontRot: 0, frontShad: 0.0, }; @@ -124,8 +89,75 @@ SvgCube.prototype.init = function () { // 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; + var transitions = 0.1; var styleStr = '' + ''; - - - 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); - - - /* TODO these will fill in some color inside in order to allow curved edges without seeing through cube, sues o.stroke.stroke for color */ - // var xMid = $(`
`) - // cube.append(xMid); - // - // var yMid = $(`
`) - // cube.append(yMid); - // - // var zMid = $(`
`) - // cube.append(zMid); - - - $('body').append(cube); - - - } - $('head>#projection').remove(); $('head').append($(styleStr)); }; -/* draw cube from urls in options and outline according to options */ -SvgCube.prototype.drawCube = function () { - - // var imgS = this.options.size / Math.sqrt(2); - // this.cube = this.paper.g(); - // this.cube.attr({ - // class: 'cube cube2', - // id: "c2notnested", - // }); - // this.leftImg = this.cube.image(this.options.leftUrl,0,0,imgS,imgS); - // this.leftImg.attr({ - // class: 'face left', - // }) - // this.rightImg = this.cube.image(this.options.rightUrl,0,0,imgS,imgS); - // this.rightImg.attr({ - // class: 'face right', - // }) - // this.topImg = this.cube.image(this.options.topUrl,0,0,imgS,imgS); - // this.topImg.attr({ - // class: 'face top', - // }) - -}; - /** * Get the bounds of the images for a screenshot * uses $.position to get min,max of each side of the image - * @return {[type]} [description] + * @return {object} object.dimension.[min|max] e.g. object.left.min */ SvgCube.prototype.getBounds = function () { var bounds = {}; @@ -310,7 +276,7 @@ SvgCube.prototype.getBounds = function () { if (dim in pos) { // init - if (bounds[dim]===undefined) { + if (bounds[dim] === undefined) { bounds[dim] = { 'max': pos[dim], 'min': pos[dim] @@ -326,34 +292,9 @@ SvgCube.prototype.getBounds = function () { return bounds; }; -/** - * Get the bounds of the images for a screenshot - * uses $.position to get min,max of each side of the image - * @return {[type]} [description] - */ -SvgCube.prototype.getAllBounds = 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] = []; - } - // get max and min - bounds[dim].push(pos[dim]); - } - } - }); - return bounds; -}; - - SvgCube.prototype.update = function () { //this.paper.remove(); this.init(); - this.drawCube(); + //this.drawCube(); console.log(this.getBounds()); }; diff --git a/svgCube.html b/svgCube.html index c020ffc..463b65e 100755 --- a/svgCube.html +++ b/svgCube.html @@ -21,12 +21,7 @@ window.onload = function() { cube1 = new SvgCube({ rotateX: 45, - topUrl: 'inputs/top.svg', - leftUrl: 'inputs/left.svg', - frontUrl: 'inputs/front.svg', - rightUrl: 'inputs/right.svg', - backUrl: 'inputs/back.svg', - bottomUrl: 'inputs/bottom.svg', + svgPanel: 'inputs/panels.svg', clipCircle: false, stroke: { "stroke": 'black', // stroke color for outline @@ -34,7 +29,6 @@ }, size: 444, }); - cube1.drawCube() var text = cube1.getBounds(); // Get dimensions of each pane and make it accesable to webdriver diff --git a/svgCube_gui.html b/svgCube_gui.html index 61c3a97..cbd3def 100755 --- a/svgCube_gui.html +++ b/svgCube_gui.html @@ -2,7 +2,7 @@ - Snap.js isometric SVG + svg2Cube @@ -12,34 +12,19 @@

The buttons allow you to try different parameters.

The front, left, etc svg's are just linked to panel.svg

- +
- + + - +