diff --git a/.gitignore b/.gitignore index 5f7ebb0f3..107779dad 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ .DS_Store .esm-cache +.vscode/ /data/data.js /dist/*.js /dist/*.css diff --git a/.npmignore b/.npmignore index 313c86743..e712d9acf 100644 --- a/.npmignore +++ b/.npmignore @@ -1,4 +1,6 @@ .DS_Store +.esm-cache +.vscode/ .travis.yml /.tx/ /data/data.js diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 7a73a41bf..000000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,2 +0,0 @@ -{ -} \ No newline at end of file diff --git a/modules/services/streetside.js b/modules/services/streetside.js index 629bc1891..a20d69408 100644 --- a/modules/services/streetside.js +++ b/modules/services/streetside.js @@ -301,6 +301,8 @@ function searchLimited(psize, limit, projection, rtree) { return results; } + + /** * getImage() */ @@ -313,14 +315,15 @@ function getImage(imgInfo){ ctx.drawImage(img, imgInfo.dx, imgInfo.dy); response.resolve({imgInfo:imgInfo, status: 'ok'}); }; - img.onerror = function(){ - console.log('img onerror !'); + img.onerror = function() { response.resolve({data: imgInfo, status: 'error'}); }; - img.setAttribute("crossorigin",""); + img.setAttribute('crossorigin',''); img.src = imgInfo.url; return response.promise; } + + /** * loadCanvas() */ @@ -328,35 +331,37 @@ function loadCanvas(imgInfoGroup){ var response = Q.defer(); var getImagePromises = []; imgInfoGroup.forEach(function(imgInfo){ - getImagePromises.push(getImage(imgInfo)) + getImagePromises.push(getImage(imgInfo)); }); - Q.all(getImagePromises).then(function(data){ - console.log('loadCanvas - All Get Images done: ', data); + Q.all(getImagePromises).then(function(data) { var canvas = document.getElementById('canvas' + data[0].imgInfo.face); - switch(data[0].imgInfo.face){ + switch (data[0].imgInfo.face) { case '01': - _dataUrlArray[0] = canvas.toDataURL('image/jpeg',1.0) + _dataUrlArray[0] = canvas.toDataURL('image/jpeg', 1.0); break; case '02': - _dataUrlArray[1] = canvas.toDataURL('image/jpeg',1.0) + _dataUrlArray[1] = canvas.toDataURL('image/jpeg', 1.0); break; case '03': - _dataUrlArray[2] = canvas.toDataURL('image/jpeg',1.0) + _dataUrlArray[2] = canvas.toDataURL('image/jpeg', 1.0); break; case '10': - _dataUrlArray[3] = canvas.toDataURL('image/jpeg',1.0) + _dataUrlArray[3] = canvas.toDataURL('image/jpeg', 1.0); break; case '11': - _dataUrlArray[4] = canvas.toDataURL('image/jpeg',1.0) + _dataUrlArray[4] = canvas.toDataURL('image/jpeg', 1.0); break; case '12': - _dataUrlArray[5] = canvas.toDataURL('image/jpeg',1.0) + _dataUrlArray[5] = canvas.toDataURL('image/jpeg', 1.0); break; } response.resolve({status:'loadCanvas for face ' + data[0].imgInfo.face + 'ok'}); }); + return response.promise; -}; +} + + /** * processImages() */ @@ -367,11 +372,13 @@ function processImages(imgFaceInfoGroups){ imgFaceInfoGroups.forEach(function(faceImgGroup){ loadCanvasPromises.push(loadCanvas(faceImgGroup)); }); - Q.all(loadCanvasPromises).then(function(data){ - response.resolve({status: 'processImages done'}) + Q.all(loadCanvasPromises).then(function(){ + response.resolve({status: 'processImages done'}); }); return response.promise; -}; +} + + export default { /** @@ -483,26 +490,30 @@ export default { * loadViewer() create the streeside viewer. */ loadViewer: function (context) { - // Add the Streetside working canvases. These are used for 'stitching', or combining, + // Add the Streetside working canvases. These are used for 'stitching', or combining, // multiple images for each of the six faces, before passing to the Pannellum control as DataUrls - if (_numImgsPerFace === 4){ + + var whVal; + if (_numImgsPerFace === 4) { whVal = '512'; - }else if (_numImgsPerFace === 16){ + } else if (_numImgsPerFace === 16) { whVal = '1024'; } - var bodyWrap = d3_select('body') + + d3_select('body') .append('div') - .attr('id','divForCanvasWork') - .attr('display','none'); - var canvasDivWrap = d3_select('#divForCanvasWork') + .attr('id', 'divForCanvasWork') + .attr('display', 'none'); + + d3_select('#divForCanvasWork') .selectAll('canvas') - .data(['canvas01','canvas02','canvas03','canvas10','canvas11','canvas12']) + .data(['canvas01', 'canvas02', 'canvas03', 'canvas10', 'canvas11', 'canvas12']) .enter() .append('canvas') - .attr('id',function(d){return d}) - .attr('width',whVal) - .attr('height',whVal); - + .attr('id', function(d) { return d; }) + .attr('width', whVal) + .attr('height', whVal); + // create ms-wrapper, a photo wrapper class var wrap = d3_select('#photoviewer').selectAll('.ms-wrapper') .data([0]); @@ -656,18 +667,19 @@ export default { } var imgUrlPrefix = streetsideImagesApi + 'hs' + bubbleIdQuadKey; var imgUrlSuffix = '.jpg?g=6338&n=z'; + // Cubemap face code order matters here: front=01, right=02, back=03, left=10, up=11, down=12 var imgFaceCodes = ['01','02','03','10','11','12']; var faceLocCodes = null; var faceLocPositions = null; - if (_numImgsPerFace === 4){ + if (_numImgsPerFace === 4) { faceLocCodes = [ '0','1','2','3' ]; faceLocPositions = [ - {dx:0,dy:0},{dx:256,dy:0},{dx:0,dy:256},{dx:256,dy:256} + {dx:0, dy:0}, {dx:256, dy:0}, {dx:0, dy:256}, {dx:256, dy:256} ]; - }else if (_numImgsPerFace === 16){ + } else if (_numImgsPerFace === 16) { faceLocCodes = [ '00','01','02','03', '10','11','12','13', @@ -675,19 +687,20 @@ export default { '30','31','32','33' ]; faceLocPositions = [ - {dx:0,dy:0},{dx:256,dy:0},{dx:0,dy:256},{dx:256,dy:256}, - {dx:512,dy:0},{dx:768,dy:0},{dx:512,dy:256},{dx:768,dy:256}, - {dx:0,dy:512},{dx:256,dy:512},{dx:0,dy:768},{dx:256,dy:768}, - {dx:512,dy:512},{dx:768,dy:512},{dx:512,dy:768},{dx:768,dy:768} - ] + {dx:0, dy:0}, {dx:256, dy:0}, {dx:0, dy:256}, {dx:256, dy:256}, + {dx:512, dy:0}, {dx:768, dy:0}, {dx:512, dy:256}, {dx:768, dy:256}, + {dx:0, dy:512}, {dx:256, dy:512}, {dx:0, dy:768}, {dx:256, dy:768}, + {dx:512, dy:512}, {dx:768, dy:512}, {dx:512, dy:768}, {dx:768, dy:768} + ]; } else { response.resolve({status:'error'}); } + // var fourImgPerFaceLocationCodes = ['0','1','2','3']; // var fourImgPerFaceLocationPositions = [{dx:0,dy:0},{dx:256,dy:0},{dx:0,dy:256},{dx:256,dy:256}]; - imgFaceCodes.forEach(function(faceCode){ + imgFaceCodes.forEach(function(faceCode) { var faceImgInfoGroup = []; - faceLocCodes.forEach(function(loc,idx_l){ + faceLocCodes.forEach(function(loc,idx_l) { var imgInfoObj = {}; imgInfoObj.face = faceCode; imgInfoObj.url = imgUrlPrefix + faceCode + loc + imgUrlSuffix; @@ -698,7 +711,7 @@ export default { _faceImgInfoGroups.push(faceImgInfoGroup); }); - processImages(_faceImgInfoGroups).then(function(data){ + processImages(_faceImgInfoGroups).then(function() { _sceneOptions = { showFullscreenCtrl: false, autoLoad: true, @@ -720,7 +733,7 @@ export default { } return response.promise; }, - + getSequenceKeyForBubble: function(d) { return d && d.sequenceKey; @@ -788,4 +801,4 @@ export default { cache: function () { return _ssCache; } -}; \ No newline at end of file +}; diff --git a/modules/svg/streetside.js b/modules/svg/streetside.js index 06dec32b6..4f72bba93 100644 --- a/modules/svg/streetside.js +++ b/modules/svg/streetside.js @@ -2,7 +2,7 @@ import _throttle from 'lodash-es/throttle'; import { select as d3_select } from 'd3-selection'; import { svgPath, svgPointTransform } from './index'; import { services } from '../services'; -import Q from 'q'; + export function svgStreetside(projection, context, dispatch) { var throttledRedraw = _throttle(function () { dispatch.call('change'); }, 1000); @@ -108,8 +108,8 @@ export function svgStreetside(projection, context, dispatch) { if (r.status === 'ok'){ service.showViewer(_viewerYaw); } - }) - + }); + context.map().centerEase(d.loc); }