diff --git a/modules/svg/data.js b/modules/svg/data.js index 0e3b9f372..7760a594e 100644 --- a/modules/svg/data.js +++ b/modules/svg/data.js @@ -31,14 +31,12 @@ export function svgData(projection, context, dispatch) { function init() { - console.log('init() called'); if (_initialized) return; // run once _geojson = {}; _enabled = true; function over(d3_event) { - console.log('over() called'); d3_event.stopPropagation(); d3_event.preventDefault(); d3_event.dataTransfer.dropEffect = 'copy'; @@ -61,7 +59,6 @@ export function svgData(projection, context, dispatch) { function getService() { - console.log('getService() called'); if (services.vectorTile && !_vtService) { _vtService = services.vectorTile; _vtService.event.on('loadedData', throttledRedraw); @@ -74,7 +71,6 @@ export function svgData(projection, context, dispatch) { function showLayer() { - console.log('showLayer() called'); layerOn(); layer @@ -87,7 +83,6 @@ export function svgData(projection, context, dispatch) { function hideLayer() { - console.log('hideLayer() called'); throttledRedraw.cancel(); layer @@ -99,13 +94,11 @@ export function svgData(projection, context, dispatch) { function layerOn() { - console.log('layerOn() called'); layer.style('display', 'block'); } function layerOff() { - console.log('layerOff() called'); layer.selectAll('.viewfield-group').remove(); layer.style('display', 'none'); } @@ -113,7 +106,6 @@ export function svgData(projection, context, dispatch) { // ensure that all geojson features in a collection have IDs function ensureIDs(gj) { - console.log('ensureIDs() called'); if (!gj) return null; if (gj.type === 'FeatureCollection') { @@ -129,7 +121,6 @@ export function svgData(projection, context, dispatch) { // ensure that each single Feature object has a unique ID function ensureFeatureID(feature) { - console.log('ensureFeatureID() called'); if (!feature) return; feature.__featurehash__ = utilHashcode(stringify(feature)); return feature; @@ -138,7 +129,6 @@ export function svgData(projection, context, dispatch) { // Prefer an array of Features instead of a FeatureCollection function getFeatures(gj) { - console.log('getFeatures() called'); if (!gj) return []; if (gj.type === 'FeatureCollection') { @@ -150,25 +140,21 @@ export function svgData(projection, context, dispatch) { function featureKey(d) { - console.log('featureKey() called'); return d.__featurehash__; } function isPolygon(d) { - console.log('isPolygon() called'); return d.geometry.type === 'Polygon' || d.geometry.type === 'MultiPolygon'; } function clipPathID(d) { - console.log('clipPathID() called'); return 'ideditor-data-' + d.__featurehash__ + '-clippath'; } function featureClasses(d) { - console.log('featureClasses() called'); return [ 'data' + d.__featurehash__, d.geometry.type, @@ -179,8 +165,6 @@ export function svgData(projection, context, dispatch) { function drawData(selection) { - console.log('drawData() called'); - console.log('selection', selection); var vtService = getService(); var getPath = svgPath(projection).geojson; var getAreaPath = svgPath(projection, null, true).geojson; @@ -285,7 +269,6 @@ export function svgData(projection, context, dispatch) { function drawLabels(selection, textClass, data) { - console.log('drawLabels() called'); var labelPath = d3_geoPath(projection); var labelData = data.filter(function(d) { return _showLabels && d.properties && (d.properties.desc || d.properties.name); @@ -319,7 +302,6 @@ export function svgData(projection, context, dispatch) { function getExtension(fileName) { - console.log('getExtension() called'); if (!fileName) return; var re = /\.(gpx|kml|(geo)?json|png)$/i; @@ -329,13 +311,11 @@ export function svgData(projection, context, dispatch) { function xmlToDom(textdata) { - console.log('xmlToDom() called'); return (new DOMParser()).parseFromString(textdata, 'text/xml'); } function stringifyGeojsonProperties(feature) { - console.log('stringifyGeojsonProperties() called'); const properties = feature.properties; for (const key in properties) { const property = properties[key]; @@ -351,7 +331,6 @@ export function svgData(projection, context, dispatch) { drawData.setFile = function(extension, data) { - console.log('drawData.setFile called'); _template = null; _fileList = null; _geojson = null; @@ -389,7 +368,6 @@ export function svgData(projection, context, dispatch) { drawData.showLabels = function(val) { - console.log('drawData.showLabels called'); if (!arguments.length) return _showLabels; _showLabels = val; @@ -398,7 +376,6 @@ export function svgData(projection, context, dispatch) { drawData.enabled = function(val) { - console.log('drawData.enabled called'); if (!arguments.length) return _enabled; _enabled = val; @@ -414,14 +391,12 @@ export function svgData(projection, context, dispatch) { drawData.hasData = function() { - console.log('drawData.hasData called'); var gj = _geojson || {}; return !!(_template || Object.keys(gj).length); }; drawData.template = function(val, src) { - console.log('drawData.template called'); if (!arguments.length) return _template; // test source against OSM imagery blocklists.. @@ -460,7 +435,6 @@ export function svgData(projection, context, dispatch) { drawData.geojson = function(gj, src) { - console.log('drawData.geojson called'); if (!arguments.length) return _geojson; _template = null; @@ -480,7 +454,6 @@ export function svgData(projection, context, dispatch) { drawData.fileList = function(fileList) { - console.log('drawData.fileList called'); if (!arguments.length) return _fileList; _template = null; @@ -505,7 +478,6 @@ export function svgData(projection, context, dispatch) { drawData.url = function(url, defaultExtension) { - console.log('drawData.url called'); _template = null; _fileList = null; _geojson = null; @@ -538,7 +510,6 @@ export function svgData(projection, context, dispatch) { drawData.fitZoom = function() { - console.log('drawData.fitZoom called'); var features = getFeatures(_geojson); if (!features.length) return; diff --git a/modules/svg/helpers.js b/modules/svg/helpers.js index 39e3358d1..8c946f6fd 100644 --- a/modules/svg/helpers.js +++ b/modules/svg/helpers.js @@ -184,7 +184,6 @@ export function svgPointTransform(projection) { var svgpoint = function(entity) { // http://jsperf.com/short-array-join var pt = projection(entity.loc); - console.log('projection point', pt); return 'translate(' + pt[0] + ',' + pt[1] + ')'; }; diff --git a/modules/svg/local_photos.js b/modules/svg/local_photos.js index 6c7d12156..ef9d6dd8a 100644 --- a/modules/svg/local_photos.js +++ b/modules/svg/local_photos.js @@ -3,31 +3,21 @@ import _throttle from 'lodash-es/throttle'; import { utilDetect } from '../util/detect'; import { select as d3_select } from 'd3-selection'; import { svgPath, svgPointTransform } from './helpers'; -// import { services } from '../services'; // Modern Node.js can import CommonJS import exifr from 'exifr'; // => exifr/dist/full.umd.cjs -// new var _initialized = false; -var _enabled = false; export function svgLocalPhotos(projection, context, dispatch) { - // required const throttledRedraw = _throttle(function () { dispatch.call('change'); }, 1000); - const minZoom = 12; - const minMarkerZoom = 16; - const minViewfieldZoom = 18; var detected = utilDetect(); let layer = d3_select(null); var _fileList; + var _imageList= []; - // new function init() { - console.log('inti() called'); if (_initialized) return; // run once - _enabled = true; - function over(d3_event) { d3_event.stopPropagation(); d3_event.preventDefault(); @@ -36,16 +26,12 @@ export function svgLocalPhotos(projection, context, dispatch) { context.container() .attr('dropzone', 'copy') - // .on('drop.svgData', function(d3_event) { .on('drop.svgLocalPhotos', function(d3_event) { d3_event.stopPropagation(); d3_event.preventDefault(); if (!detected.filedrop) return; drawPhotos.fileList(d3_event.dataTransfer.files); }) - // .on('dragenter.svgData', over) - // .on('dragexit.svgData', over) - // .on('dragover.svgData', over); .on('dragenter.svgLocalPhotos', over) .on('dragexit.svgLocalPhotos', over) .on('dragover.svgLocalPhotos', over); @@ -53,178 +39,53 @@ export function svgLocalPhotos(projection, context, dispatch) { _initialized = true; } - // TODO: after checkbox is implemented - function showLayer() { - console.log('showLayer() called'); - // if images are not available return - // const service = getService(); - // if (!service) return; - - // same as layerOn() in data.js - editOn(); - - layer - .style('opacity', 0) - .transition() - .duration(250) - .style('opacity', 1) - .on('end', function () { dispatch.call('change'); }); - } - - // TODO: after checkbox is implemented - function hideLayer() { - console.log('hideLayer() called'); - throttledRedraw.cancel(); - - layer - .transition() - .duration(250) - .style('opacity', 0) - .on('end', editOff); - } - - // same as layerOn() in data.js - function editOn() { - console.log('editOn() called'); - layer.style('display', 'block'); - } - - - // same as layerOff() in data.js - function editOff() { - console.log('editOff() called'); - layer.selectAll('.viewfield-group').remove(); - layer.style('display', 'none'); + function closePhotoViewer() { + d3_select('.over-map').selectAll('.local-photo-viewer').remove(); } // opens the image at bottom left function click(d3_event, image) { - console.log('click() called'); + // removes old div(s), if any + closePhotoViewer(); - var width = 750, height = 400; + var image_container = d3_select('.over-map') + .append('div') + .attr('style', 'position: relative;margin: 5px;border: 5px solid white;') + .attr('class', 'local-photo-viewer'); - var canvas = context.container().select('#container') - .append('canvas') - .attr('width', width) - .attr('height', height) - .style('position', 'absolute'); -// style="position: absolute; width: 320px; height: 240px;" - var canvas_context = canvas.node().getContext('2d'); + var close_button = image_container + .append('button') + .text('X') + .on('click', function(d3_event) { + d3_event.preventDefault(); + closePhotoViewer(); + }) + .attr('style', 'position: absolute;right: 0;padding: 3px 10px;font-size: medium;border-radius:0;'); - // const service = getService(); - // if (!service) return; + var myimage = image_container + .append('img') + .attr('src', image.src) + .attr('width', 400) + .attr('height', 300); - // service - // .ensureViewerLoaded(context) - // .then(function() { - // service - // .selectImage(context, image.id) - // .showViewer(context); - // }); + // centers the map with image location context.map().centerEase(image.loc); } - // TODO: later - function mouseover(d3_event, image) { - console.log('mouseover() called'); - // const service = getService(); - - // if (service) service.setStyles(context, image); - } - - // TODO: later - function mouseout() { - console.log('mouseout() called'); - // const service = getService(); - // if (service) service.setStyles(context, null); - } - - // if you want to put any image with geo coordinates - // this is coordinates transformation - // converting gps coordinates on screen - function fn_transform(projection) { - var svgpoint = function(entity) { - var pt = projection(entity.loc); - console.log('projection point', pt); - return 'translate(' + pt[0] + ',' + pt[1] + ')'; - }; - - return svgpoint; - } function transform(d) { - console.log('transform() called with', d); // projection expects [long, lat] - let t = fn_transform(projection)(d); - console.log('after svgPointTransform', t); - return t; + var svgpoint = projection(d.loc); + return 'translate(' + svgpoint[0] + ',' + svgpoint[1] + ')'; } - // a sequence is a list of images - // no need to filter sequence - // function filterSequences(sequences) {...} - - - // puts the images on the map - function update() { - console.log('update() called'); - console.log(context.map()); - const z = ~~context.map().zoom(); - const showMarkers = (z >= minMarkerZoom); - // const showViewfields = (z >= minViewfieldZoom); - const showViewfields = true; - - // const service = getService(); - // const service = _fileList; - // let sequences = (service ? service.sequences(projection) : []); - // supply dummy data and see the rest of the code - // let images = (service && showMarkers ? service.images(projection) : []); - - // images[0] - // { - // "loc":[13.235349655151367,52.50694232952122], - // "captured_at":1619457514500, - // "ca":0, - // "id":505488307476058, - // "is_pano":false, - // "sequence_id":"zcyumxorbza3dq3twjybam" - // } - // let image_1 = { ca: 63.629999999999995, - // captured_at: 1629896192000, - // id: 1698202743707180, - // is_pano: false, - // loc: [ 125, 280], - // sequence_id: "DMyGn8gtvrBwN1xPbVFHAZ", - // } - - // let image_2 = { ca: 154.6, - // captured_at: 1629892592000, - // id: 331503412089696, - // is_pano: false, - // loc: [52.50783, 13.23618], - // sequence_id: "eIZiowmur0COgFXAh468db" - // } - - let image_1 = { - id: 1, - // loc: [12.99306035041809, 51.99935827101777], - loc: [12, 51] - } - - let image_2 = { - id: 2, - // loc: [12.993113994598389, 51.999364876443025], - // loc: [13.23618, 52.50783], - loc: [35.014377, 52] - } - - let images = [image_1, image_2] + // puts the image markers on the map + function display_markers(imageList) { + console.log('display_markers() called'); const groups = layer.selectAll('.markers').selectAll('.viewfield-group') - // .data(images, function(d) { return d.id; }); - .data(images, function(d) { return d.id; }); - + .data(imageList, function(d) { return d.id; }); // exit groups.exit() @@ -234,8 +95,6 @@ export function svgLocalPhotos(projection, context, dispatch) { const groupsEnter = groups.enter() .append('g') .attr('class', 'viewfield-group') - // .on('mouseenter', mouseover) - // .on('mouseleave', mouseout) .on('click', click); groupsEnter @@ -245,9 +104,6 @@ export function svgLocalPhotos(projection, context, dispatch) { // update const markers = groups .merge(groupsEnter) - // .sort(function(a, b) { - // return b.loc[1] - a.loc[1]; // sort Y - // }) .attr('transform', transform) .select('.viewfield-scale'); @@ -258,39 +114,29 @@ export function svgLocalPhotos(projection, context, dispatch) { .append('circle') .attr('dx', '0') .attr('dy', '0') - .attr('r', '15'); + .attr('r', '20') + .attr('fill', 'red'); const viewfields = markers.selectAll('.viewfield') - .data(showViewfields ? [0] : []); + .data([0]); viewfields.exit() .remove(); } - - // draws the actual images - // create your onw css for this function drawPhotos(selection) { console.log('drawPhotos fn called'); - // const enabled = svgMapillaryImages.enabled; - // const enabled = _enabled; - const enabled = true; - const fileList = _fileList; - - - // creates a layer if doesn't exist layer = selection.selectAll('.layer-local-photos') - .data(fileList ? [0] : []); + .data(_fileList ? [0] : []); layer.exit() .remove(); const layerEnter = layer.enter() .append('g') - .attr('class', 'layer-local-photos') - .style('display', enabled ? 'block' : 'none'); + .attr('class', 'layer-local-photos'); layerEnter .append('g') @@ -299,170 +145,96 @@ export function svgLocalPhotos(projection, context, dispatch) { layer = layerEnter .merge(layer); - // if (enabled) { - // if (~~context.map().zoom() >= minZoom) { - // editOn(); - // update(); - // // service.loadImages(projection); - // } else { - // editOff(); - // } - // } - - if (_fileList) { - editOn(); - update(); - } else { - editOff(); + // if (_imageList.length !== 0) { + // if (_fileList && _fileList.length !== 0) { + if (_imageList && _imageList.length !== 0) { + display_markers(_imageList); } } - // drawImages.enabled = function(_) { - // if (!arguments.length) return svgMapillaryImages.enabled; - // svgMapillaryImages.enabled = _; - // if (svgMapillaryImages.enabled) { - // showLayer(); - // context.photos().on('change.mapillary_images', update); - // } else { - // hideLayer(); - // context.photos().on('change.mapillary_images', null); - // } - // dispatch.call('change'); - // return this; - // }; + /** + * Reads and parses files + * @param {Array} arrayFiles - Holds array of file - [file_1, file_2, ...] + */ + async function readmultifiles(arrayFiles) { + const filePromises = arrayFiles.map((file, i) => { + // Return a promise per file + return new Promise((resolve, reject) => { + const reader = new FileReader(); + // converts image to base64 + reader.readAsDataURL(file); - // new - // use this since using global value - // slightly modified for photos - drawPhotos.enabled = function(val) { - console.log('drawPhotos.enabled called'); - if (!arguments.length) return _enabled; + reader.onload = async () => { + try { + const response = await exifr.parse(file) + .then(output => { - _enabled = val; - if (_enabled) { - showLayer(); - // context.photos().on('change.mapillary_images', update); - context.photos().on('change.', update); - } else { - hideLayer(); - // context.photos().on('change.mapillary_images', null); - context.photos().on('change.', null); - } + _imageList.push( + { + id: i, + name: file.name, + src: reader.result, + loc: [output.longitude, output.latitude] + } + ); + }); + // Resolve the promise with the response value + resolve(response); + } catch (err) { + reject(err); + } + }; + reader.onerror = (error) => { + reject(error); + }; + }); + }); + + // Wait for all promises to be resolved + const fileInfos = await Promise.all(filePromises); dispatch.call('change'); - return this; }; - function extract_exif(image) { - var reader = new FileReader(); - - reader.onload = function () { - exifr.parse(image) - .then(output => console.log('Image parsed', output)); - }; - - reader.readAsText(image); - } - - // Step 2 - // this is where the exif parsing library comes into play - // get all info from the image - // drawPhotos.setFile = function(extension, data) { - // drawPhotos.setFile = function(fileList) { - drawPhotos.setFile = function(file) { + drawPhotos.setFile = function(fileList) { console.log('drawPhotos.setFile called'); - // _fileList = null; + /** + * Holds array of file - [file_1, file_2, ...] + * file_1 = {name: "Das.png", lastModified: 1625064498536, lastModifiedDate: Wed Jun 30 2021 20:18:18 GMT+0530 (India Standard Time), webkitRelativePath: "", size: 859658, …} + * @type {Array} + */ + var arrayFiles = Object.keys(fileList).map(function(k) { return fileList[k]; }); - // fileList.forEach(image => - // extract_exif(image) - // .then(console.log('All images parsed successfully')) - // .catch(err => console.log(err)) - // ); - - extract_exif(file); + // read and parse asynchronously + readmultifiles(arrayFiles); dispatch.call('change'); return this; }; // Step 1: entry point + /** + * Sets the fileList + * @param {Object} fileList - The uploaded files. fileList is an object, not an array object + * @param {Object} fileList.0 - A File - {name: "Das.png", lastModified: 1625064498536, lastModifiedDate: Wed Jun 30 2021 20:18:18 GMT+0530 (India Standard Time), webkitRelativePath: "", size: 859658, …} + */ drawPhotos.fileList = function(fileList) { console.log('drawPhotos.fileList called'); - console.log('Step 2: fileList read', fileList); if (!arguments.length) return _fileList; _fileList = fileList; if (!fileList || !fileList.length) return this; - // its just fetching one entry - // fetch all for local photos - // probablay a promise is required - var f = fileList[0]; - drawPhotos.setFile(f); - // var reader = new FileReader(); - // reader.onload = (function() { - // return function(e) { - // // Step 2 - // drawPhotos.setFile(extension, e.target.result); - // }; - // })(f); + drawPhotos.setFile(_fileList); return this; }; - // TODO: later - // new - // when all photos are uploaded, zoom to see them all - drawPhotos.fitZoom = function() { - console.log('drawPhotos.fitZoom called'); - // var features = getFeatures(_geojson); - // if (!features.length) return; - - var map = context.map(); - var viewport = map.trimmedExtent().polygon(); - // features is not defined - // var coords = features.reduce(function(coords) { - // var geom = feature.geometry; - // if (!geom) return coords; - - // var c = geom.coordinates; - - // /* eslint-disable no-fallthrough */ - // switch (geom.type) { - // case 'Point': - // c = [c]; - // case 'MultiPoint': - // case 'LineString': - // break; - - // case 'MultiPolygon': - // // c = utilArrayFlatten(c); - // case 'Polygon': - // case 'MultiLineString': - // // c = utilArrayFlatten(c); - // break; - // } - // /* eslint-enable no-fallthrough */ - - // return utilArrayUnion(coords, c); - // }, []); - - // if (!geoPolygonIntersectsPolygon(viewport, coords, true)) { - // var extent = geoExtent(d3_geoBounds({ type: 'LineString', coordinates: coords })); - // map.centerZoom(extent.center(), map.trimmedExtentZoom(extent)); - // } - - return this; - }; - - // TODO: later - drawPhotos.supported = function() { - console.log('drawPhotos.supported called'); - // return !!getService(); - }; - + // TODO: when all photos are uploaded, zoom to see them all + // drawPhotos.fitZoom = function() { + // }; init(); return drawPhotos; diff --git a/modules/svg/mapillary_images.js b/modules/svg/mapillary_images.js index 7e76a0da3..ffa7f88ad 100644 --- a/modules/svg/mapillary_images.js +++ b/modules/svg/mapillary_images.js @@ -15,7 +15,6 @@ export function svgMapillaryImages(projection, context, dispatch) { function init() { - console.log('init() called'); if (svgMapillaryImages.initialized) return; // run once svgMapillaryImages.enabled = false; svgMapillaryImages.initialized = true; @@ -23,7 +22,6 @@ export function svgMapillaryImages(projection, context, dispatch) { function getService() { - console.log('getService() called'); if (services.mapillary && !_mapillary) { _mapillary = services.mapillary; _mapillary.event.on('loadedImages', throttledRedraw); @@ -36,7 +34,6 @@ export function svgMapillaryImages(projection, context, dispatch) { function showLayer() { - console.log('showLayer() called'); const service = getService(); if (!service) return; @@ -52,7 +49,6 @@ export function svgMapillaryImages(projection, context, dispatch) { function hideLayer() { - console.log('hideLayer() called'); throttledRedraw.cancel(); layer @@ -64,20 +60,17 @@ export function svgMapillaryImages(projection, context, dispatch) { function editOn() { - console.log('editOn() called'); layer.style('display', 'block'); } function editOff() { - console.log('editOff() called'); layer.selectAll('.viewfield-group').remove(); layer.style('display', 'none'); } function click(d3_event, image) { - console.log('click() called'); const service = getService(); if (!service) return; @@ -94,7 +87,6 @@ export function svgMapillaryImages(projection, context, dispatch) { function mouseover(d3_event, image) { - console.log('mouseover() called'); const service = getService(); if (service) service.setStyles(context, image); @@ -102,26 +94,21 @@ export function svgMapillaryImages(projection, context, dispatch) { function mouseout() { - console.log('mouseout() called'); const service = getService(); if (service) service.setStyles(context, null); } function transform(d) { - console.log('transform() called with', d); let t = svgPointTransform(projection)(d); - console.log('after svgPointTransform', t); if (d.ca) { t += ' rotate(' + Math.floor(d.ca) + ',0,0)'; } - // console.log('after adding rotate', t); return t; } function filterImages(images) { - console.log('filterImages() called'); const showsPano = context.photos().showsPanoramic(); const showsFlat = context.photos().showsFlat(); const fromDate = context.photos().fromDate(); @@ -148,7 +135,6 @@ export function svgMapillaryImages(projection, context, dispatch) { } function filterSequences(sequences) { - console.log('filterSequences() called'); const showsPano = context.photos().showsPanoramic(); const showsFlat = context.photos().showsFlat(); const fromDate = context.photos().fromDate(); @@ -178,7 +164,6 @@ export function svgMapillaryImages(projection, context, dispatch) { } function update() { - console.log('update() called'); const z = ~~context.map().zoom(); const showMarkers = (z >= minMarkerZoom); const showViewfields = (z >= minViewfieldZoom); @@ -277,7 +262,6 @@ export function svgMapillaryImages(projection, context, dispatch) { function drawImages(selection) { - console.log('drawImages() called'); const enabled = svgMapillaryImages.enabled; const service = getService(); @@ -316,7 +300,6 @@ export function svgMapillaryImages(projection, context, dispatch) { drawImages.enabled = function(_) { - console.log('drawImages.enabled called'); if (!arguments.length) return svgMapillaryImages.enabled; svgMapillaryImages.enabled = _; if (svgMapillaryImages.enabled) { @@ -332,7 +315,6 @@ export function svgMapillaryImages(projection, context, dispatch) { drawImages.supported = function() { - console.log('drawImages.supported called'); return !!getService(); }; diff --git a/modules/ui/sections/data_layers.js b/modules/ui/sections/data_layers.js index 3e88226da..591ae1b96 100644 --- a/modules/ui/sections/data_layers.js +++ b/modules/ui/sections/data_layers.js @@ -294,7 +294,6 @@ export function uiSectionDataLayers(context) { } } - // original function function drawCustomDataItems(selection) { var dataLayer = layers.layer('data'); var hasData = dataLayer && dataLayer.hasData(); @@ -378,18 +377,13 @@ export function uiSectionDataLayers(context) { .classed('disabled', !hasData); } - // added/testing: new function for local photos function drawLocalPhotos(selection) { var dataLayer = layers.layer('local-photos'); - console.log(dataLayer, 'dataLayer'); - // var hasData = dataLayer && dataLayer.hasData(); - // var showsData = hasData && dataLayer.enabled(); - // creates ul, if it doesn't exist var ul = selection .selectAll('.layer-list-local-photos') .data(dataLayer ? [0] : []); - + // Exit ul.exit() .remove(); @@ -398,7 +392,7 @@ export function uiSectionDataLayers(context) { var ulEnter = ul.enter() .append('ul') .attr('class', 'layer-list layer-list-local-photos'); - + var localPhotosEnter = ulEnter .append('li') .attr('class', 'list-item-local-photos'); @@ -407,10 +401,11 @@ export function uiSectionDataLayers(context) { .append('label'); // TODO: Add tooltip - localPhotosLabelEnter - .append('input') - .attr('type', 'checkbox') - .on('change', function() { toggleLayer('local-photos'); }); + // TODO + // localPhotosLabelEnter + // .append('input') + // .attr('type', 'checkbox') + // .on('change', function() { toggleLayer('local-photos'); }); localPhotosLabelEnter .append('span') @@ -449,158 +444,14 @@ export function uiSectionDataLayers(context) { ul = ul .merge(ulEnter); - // ul.selectAll('.list-item-data') - // .classed('active', showsData) - // .selectAll('label') - // .classed('deemphasize', !hasData) - // .selectAll('input') - // .property('disabled', !hasData) - // .property('checked', showsData); - - // ul.selectAll('button.zoom-to-data') - // .classed('disabled', !hasData); } - // current fn - // function drawCustomDataItems(selection) { - // var dataLayer = layers.layer('data'); - // var hasData = dataLayer && dataLayer.hasData(); - // var showsData = hasData && dataLayer.enabled(); - - // var ul = selection - // .selectAll('.layer-list-data') - // .data(dataLayer ? [0] : []); - - // // Exit - // ul.exit() - // .remove(); - - // // Enter - // var ulEnter = ul.enter() - // .append('ul') - // .attr('class', 'layer-list layer-list-data'); - - // // Custom Map Data - // var mapEnter = ulEnter - // .append('li') - // .attr('class', 'list-item-data'); - - // var mapLabelEnter = mapEnter - // .append('label') - // .call(uiTooltip() - // .title(t.html('map_data.layers.custom.tooltip')) - // .placement('top') - // ); - - // mapLabelEnter - // .append('input') - // .attr('type', 'checkbox') - // .on('change', function() { toggleLayer('data'); }); - - // mapLabelEnter - // .append('span') - // .call(t.append('map_data.layers.custom.title')); - - // mapEnter - // .append('button') - // .attr('class', 'open-data-options') - // .call(uiTooltip() - // .title(t.html('settings.custom_data.tooltip')) - // .placement((localizer.textDirection() === 'rtl') ? 'right' : 'left') - // ) - // .on('click', function(d3_event) { - // d3_event.preventDefault(); - // editCustom(); - // }) - // .call(svgIcon('#iD-icon-more')); - - // mapEnter - // .append('button') - // .attr('class', 'zoom-to-data') - // .call(uiTooltip() - // .title(t.html('map_data.layers.custom.zoom')) - // .placement((localizer.textDirection() === 'rtl') ? 'right' : 'left') - // ) - // .on('click', function(d3_event) { - // if (d3_select(this).classed('disabled')) return; - - // d3_event.preventDefault(); - // d3_event.stopPropagation(); - // dataLayer.fitZoom(); - // }) - // .call(svgIcon('#iD-icon-framed-dot', 'monochrome')); - - // // new item - local photos - // var localPhotosEnter = ulEnter - // .append('li') - // .attr('class', 'list-item-local-photos'); - - // var localPhotosLabelEnter = localPhotosEnter - // .append('label'); - // // TODO: Add tooltip - - // localPhotosLabelEnter - // .append('input') - // .attr('type', 'checkbox') - // .on('change', function() { toggleLayer('data'); }); - - // localPhotosLabelEnter - // .append('span') - // .text('Local Photos'); - - // localPhotosEnter - // .append('button') - // .attr('class', 'open-data-options') - // .call(uiTooltip() - // .title(t.html('settings.custom_data.tooltip')) - // .placement((localizer.textDirection() === 'rtl') ? 'right' : 'left') - // ) - // .on('click', function(d3_event) { - // d3_event.preventDefault(); - // editLocalPhotos(); - // }) - // .call(svgIcon('#iD-icon-more')); - - // localPhotosEnter - // .append('button') - // .attr('class', 'zoom-to-data') - // .call(uiTooltip() - // .title(t.html('map_data.layers.custom.zoom')) - // .placement((localizer.textDirection() === 'rtl') ? 'right' : 'left') - // ) - // .on('click', function(d3_event) { - // if (d3_select(this).classed('disabled')) return; - - // d3_event.preventDefault(); - // d3_event.stopPropagation(); - // dataLayer.fitZoom(); - // }) - // .call(svgIcon('#iD-icon-framed-dot', 'monochrome')); - - // // Update - // ul = ul - // .merge(ulEnter); - - // ul.selectAll('.list-item-data') - // .classed('active', showsData) - // .selectAll('label') - // .classed('deemphasize', !hasData) - // .selectAll('input') - // .property('disabled', !hasData) - // .property('checked', showsData); - - // ul.selectAll('button.zoom-to-data') - // .classed('disabled', !hasData); - // } - function editCustom() { context.container() .call(settingsCustomData); } function customChanged(d) { - console.log('customChanged called'); - console.log(layers); var dataLayer = layers.layer('data'); if (d && d.url) { @@ -616,11 +467,9 @@ export function uiSectionDataLayers(context) { } function localPhotosChanged(d) { - console.log('localPhotosChanged called'); var localPhotosLayer = layers.layer('local-photos'); if (d && d.fileList) { - console.log('Step 1: fileList set', d.fileList); localPhotosLayer.fileList(d.fileList); } }