CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-03-31 01:09:22 +02:00
Code Issues Packages Projects Releases Wiki Activity

Refactor: working prototype, needs some error handling and translation

Browse Source
This commit is contained in:
Mukesh Jaiswal
2022-09-12 13:41:19 +02:00
parent 70f36bc3e1
commit 3ccc434c83
5 changed files with 101 additions and 528 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
modules/svg/data.js
View File

@@ -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;

1
modules/svg/helpers.js
View File

@@ -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] + ')';
};

416
modules/svg/local_photos.js
View File

@@ -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<object>} 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<object>}
*/
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;

18
modules/svg/mapillary_images.js
View File

@@ -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();
};

165
modules/ui/sections/data_layers.js
View File

@@ -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);
}
}